Container.js

// app/components/Container.js

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: '500',
  },
});

const Container = ({ backgroundColor, onPress, children }) => (
  <View style={[styles.container, { backgroundColor }]}>
    <TouchableOpacity onPress={onPress}>
      <Text style={styles.text}>{backgroundColor}</Text>
    </TouchableOpacity>
    {children}
  </View>
);

export default Container;

index.*.js

// index.ios.js, index.android.js

import { AppRegistry } from 'react-native';
import App from './app/index';

AppRegistry.registerComponent('GettingStartedReactNativeNav', () => App);

index.js

// app/index.js

import React from 'react';
import Screen from './screens/Screen1';

export default Screen;

Screen1.js

// app/screens/Screen1.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import Container from '../components/Container';

class Screen extends Component {
  render() {
    return (
      <Container
        backgroundColor="#F44336"
        onPress={() => console.log('press')}
      />
    );
  }
}

export default Screen;

Screen2.js

// app/screens/Screen2.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import Container from '../components/Container';

class Screen extends Component {
  render() {
    return (
      <Container
        backgroundColor="#c95e0c"
        onPress={() => console.log('press')}
      />
    );
  }
}

export default Screen;

Screen3.js

// app/screens/Screen3.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import Container from '../components/Container';

class Screen extends Component {
  render() {
    return (
      <Container
        backgroundColor="#067a46"
        onPress={() => console.log('press')}
      />
    );
  }
}

export default Screen;

Screen4.js

// app/screens/Screen4.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import Container from '../components/Container';

class Screen extends Component {
  render() {
    return (
      <Container
        backgroundColor="#01446b"
        onPress={() => console.log('press')}
      />
    );
  }
}

export default Screen;