React Native props and state

./index.js

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import App from './src/App';

AppRegistry.registerComponent(appName, () => App);

./src/App.js

import React, { Fragment } from 'react';
import CustomCard from './CustomCard';

const App = () => {
  let firstImage = { uri: 'https://media.gettyimages.com/photos/portrait-of-sleeping-koala-bear-lone-pine-sanctuary-brisbane-picture-id460707851?s=2048x2048'};
  let secondImage = { uri: 'https://media.gettyimages.com/photos/paper-airplane-flat-design-picture-id1185579760?s=2048x2048'};
  return (
    
      
      
    
  );
};
export default App;

./src/CustomCard.js

import React, { Component } from 'react';
import { Button, Image, StyleSheet, Text, View } from 'react-native';

export default class CustomCard extends Component {
  constructor(props){
    super(props)
    this.state = {isHidden : false}
  }
  showHideText = () => {
    this.setState({isHidden : !this.state.isHidden})
  }
  render() {
    return (
      
        {this.state.isHidden? this.props.title : ''}
        
        
      
    );
  }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
});

The props for CustomCard are url and title, the values for them are passed in when CustomCard tags are created in the App.js

The state for CustomCard is defined in the constructor in CustomCard class. In this case, there is only one property in the state object, and initial value is set to false. The function showHideText respond to the button onPress event. It will update the state property isHidden whenever the button is clicked. The change is reflected on the Text tag.

Complete example in Github