Simple React Native app

README.md

React Native Example

Created with Create React Native App. This example shows how to create three screens in a TabNavigator with vector icons and arbitrary conent. The third screen is an example WebView. Expo is part of the create-react-native-app package, and it makes it very easy to view on your own device.

Libraries used (all of which were simply dropped in):

• React Native Vector Icons
• React Navigation for the TabNavigator

App.js

import React from 'react';
import { StyleSheet, Text, View, WebView } from 'react-native';
import { TabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/SimpleLineIcons';

// Icons & styles
//
const homeIcon = (<Icon name="home" size={24} />);
const globeIcon = (<Icon name="globe-alt" size={24} />);
const recentIcon = (<Icon name="rocket" size={24} />);

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

// Screens
//
class RecentChatsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Recent',
    tabBarIcon: recentIcon,
  };

  render() {
    return(
      <View style={styles.container}>
        <Text>Recent</Text>
      </View>
    )
  }
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: homeIcon,
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>All</Text>
      </View>
    )
  }
}

class MyWeb extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Web',
    tabBarIcon: globeIcon,
  };

  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
      />
    );
  }
}

// Navigator App
//
const App = TabNavigator({
  Home: { screen: HomeScreen },
  Recent: { screen: RecentChatsScreen },
  Web: { screen: MyWeb }
});


export default App;

package.json

{
  "name": "react-native-test",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "0.0.30",
    "jest-expo": "~1.0.1",
    "react-test-renderer": "16.0.0-alpha.6"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^17.0.0",
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.0",
    "react-native-vector-icons": "^4.2.0",
    "react-navigation": "^1.0.0-beta.11"
  }
}

Quick example of what this code produces.