Writing Stateless Components in React Native

MyComponent.js

// Consider a situation where you pass data, a state, and your navigation as props to your child component.

const MyComponent = ({ loadingImages, data, navigation }) => {
  
  const loadNextPage = () => {
    navigation.navigate('NextPage');
  }
  
  return (
    <View>
    {
      loadingImages ?
      <ActivityIndicator />
      :
      <Image source={{ uri: data.image }} />
    }
      <View>
        <Text>{data.title}</Text>
        <Text>{data.subtitle}</Text>
      </View>
      <TouchableOpacity
        onPress={loadNextPage}
        activeOpacity={0.8}
      >
        <Text>Click here for next page.</Text>
      </TouchableOpacity>
    </View>
  );
};

export default MyComponent;

/*
USAGE in a Screen -- ParentScreen.js
Consider you called your API in the screen which loads a bunch of images. This data was then inserted into this.data object.
When the API gets called and the parent rerenders, so does the child. 

<MyComponent 
  loadingImages={this.state.loadingImages}  
  data={this.data}
  navigation={this.props.navigation}
/>
*/