I would like there to be text on the first image but not the second - swipable

Question

I am trying to accomplish this: I would like there to be text on the first image, but after that I do not want there to be. Everything I commented out is how I am doing it originally, but changed so it could be viewed for you guys. Please make note of that as it might change the insight I receive. Right now I am getting no display of text at all.

Also, if the carousel in there adds too much distraction I can take it out.

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  ScrollView,
  Dimensions,
  ImageBackground,
} from 'react-native';
import Constants from 'expo-constants';

const { width } = Dimensions.get('window');
const height = width * 0.6;

const images = [
  'https://images.pexels.com/photos/2249602/pexels-photo-2249602.jpeg?cs=srgb&dl=pexels-sergio-souza-2249602.jpg&fm=jpg',
  'https://images.pexels.com/photos/3178881/pexels-photo-3178881.jpeg?cs=srgb&dl=pexels-andrew-neel-3178881.jpg&fm=jpg',
  'https://images.pexels.com/photos/4946412/pexels-photo-4946412.jpeg?cs=srgb&dl=pexels-maria-orlova-4946412.jpg&fm=jpg',
  'https://images.pexels.com/photos/4911060/pexels-photo-4911060.jpeg?cs=srgb&dl=pexels-cottonbro-4911060.jpg&fm=jpg',
];

//this is the array I noramlly use. 
//const images = [
//   {id : "1", uri: require('../../assets/placeholder1.jpg'), text: "Test"},
//   {id : "2", uri: require('../../assets/placeholder2.jpg'), /*text: "Test"*/},
//   {id : "3", uri: require('../../assets/placeholder3.jpg'), /*text: "Test"*/},
//   {id : "4", uri: require('../../assets/placeholder4.jpg'), /*text: "Test"*/},
//   {id : "5", uri: require('../../assets/placeholder5.jpg'), /*text: "Test"*/},
//   {id : "6", uri: require('../../assets/placeholder6.jpg'), /*text: "Test"*/},
//   {id : "7", uri: require('../../assets/placeholder7.jpg'), /*text: "Test"*/},
//   {id : "8", uri: require('../../assets/placeholder8.jpg'), /*text: "Test"*/},
//   {id : "9", uri: require('../../assets/placeholder9.jpg'), /*text: "Test"*/},
//]

export default class App extends React.Component {
  
  state = {
    active: 0,
  };

  change = ({ nativeEvent }) => {
    const slide = Math.ceil(
      nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width
    );
      if (slide !== this.state.active) {
        this.setState({ active: slide });
    }
    
  };
  render() {
    return (
     <View style={{flex: 1}}>
      <View style={{ flex: 3, justifyContent: 'center', alignItems: 'center'}}>
        <ScrollView
          pagingEnabled
          horizontal
          showsHorizontalScrollIndicator={false}
          onScroll={this.change}
          style={{ width, height }}>
 
          {
            images.map((image, index) => (
            <ImageBackground
              key={index}
              source={{uri: image}}
              //Normally, I would not have key and source would be like this
              //source={item.uri}
              style={{ width, height: '100%', resizeMode: 'cover' }}>
                  <View style={{position: 'absolute', bottom: 25 }}>      
                     <Text style = {this.state.active === 0 ? <Text>Placeholder</Text> : null , styles.Name}> </Text>  
                 <Text style = {this.state.active === 0 ? <Text>Another Placeholder</Text> : null , styles.Name}> </Text>        
</View>
             </ImageBackground>
             ))
             }

        </ScrollView>

           <View style={{flexDirection: 'row', position: 'absolute', bottom: 0, alignSelf: 'center',}}>
               {
                  images.map((i, k) => (
                    <Text style={k == this.state.active ? styles.activeCorousel : styles.carousel}> 
                      ⬤
                    </Text>
                  ))}
            </View>

     </View>
   </View>
      
    );
  }
}

const styles = StyleSheet.create({
  carousel: {
    color: '#888',
    fontSize: width / 35,
    opacity: .5
  },
  activeCorousel: {
    color: '#fff',
    fontSize: width / 35,
  },
    Name: {
        fontWeight: 'bold',
        color: 'white',
        fontSize: 40,
    paddingLeft: 20
        },      
});

Feel free to copy my code into snack.expo.io.

Answer 1

Use conditional JSX to render only if the index is equal to 0.

images.map((image, index) => (
  <ImageBackground
    key={index}
    source={{uri: image}}
    style={{ width, height: '100%', resizeMode: 'cover' }}
  >
    {index === 0 && (
      <View style={{position: 'absolute', bottom: 25 }}>      
        <Text>Placeholder</Text> 
      </View>
    )}
  </ImageBackground>
))

Also, your conditional styling:

<Text style = {this.state.active === 0 ? <Text>...

does not make any sense at all; style attribute does not support JSX, just only React Native valid styling props.