knowbody

Exponent - ex-navigation

This is for now, for my personal use only, things might not be correctly explained here. For the official docs please check: https://github.com/exponentjs/ex-navigation/blob/master/README.md

Navigation bar configuration

On every screen you can use the built-in navigation bar, you can add a title, left button, right button or change navigation bar’s style. All you need to do is pass appropriate params to navigationBar in the route configuration:

import React, { Component } from 'react';

knowbody

import React, { Component } from 'react';
import {
  Animated,
  Dimensions,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  View,
  Text,
} from 'react-native';

knowbody

import React, { Component } from 'react';
import {
  Animated,
  Dimensions,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  View,
  Text,
} from 'react-native';

knowbody

{"version":1.02,"files":[{"file":".gitignore","content":{"type":"Buffer","data":[98,108,111,98,45,115,116,111,114,101,10,99,111,109,112,105,108,101,45,99,97,99,104,101,10,100,101,118,10,115,116,111,114,97,103,101,10,46,110,111,100,101,45,103,121,112,10,46,110,112,109,10]}},{"file":"config.cson","content":{"type":"Buffer","data":[34,42,34,58,10,32,32,34,97,116,111,109,45,109,97,116,101,114,105,97,108,45,117,105,34,58,10,32,32,32,32,99,111,108,111,114,115,58,10,32,32,32,32,32,32,97,98,97,115,101,67,111,108,111,114,58,10,32,32,32,32,32,32,32,32,114,101,100,58,32,50,51,56,10,32,32,32,32,32,32,32,32,103,114,101,101,110,58,32,54,48,10,32,32,32,32,32,32,32,32,98,108,117,101,58,32,49,50,49,10,32,32,32,32,32,32,32,32,97,108,112,104,97,58,32,49,10,32,32,32,32,32,32,97,99,99,101,110,116,67,111,108,111,114,58,10,32,32,32,32,32,32,32,32,114,101,100,58,32,54,56,10,32,32,32,32,32,32,32,32,103,114,101,101,110,58,32,50,53,53,10,32,32,32,32,32,32,32,32,98,108,117,101,58,32,49,57,49,10,32,32,32,32,32,32,32,32,97,108,112,104,97,

knowbody

{ fontWeight: '100' }, // Thin
{ fontWeight: '200' }, // Ultra Light
{ fontWeight: '300' }, // Light
{ fontWeight: '400' }, // Regular
{ fontWeight: '500' }, // Medium
{ fontWeight: '600' }, // Semibold
{ fontWeight: '700' }, // Bold
{ fontWeight: '800' }, // Heavy
{ fontWeight: '900' }, // Black

knowbody

// quick snippet to check the connection in your RN app
// dispatches an `setIsConnected` action every time the NetInfo changes (on/off network)

componentDidMount() {
  const dispatchConnected = isConnected => this.props.dispatch(setIsConnected(isConnected));

  NetInfo.isConnected.fetch().then().done(() => {
    NetInfo.isConnected.addEventListener('change', dispatchConnected);
  });
}

knowbody

import React, { Component } from 'react';
import { AppRegistry, CameraRoll, Dimensions, View, StyleSheet } from 'react-native';
import Camera from 'react-native-camera';
import { Button } from 'react-native-vector-icons/Ionicons';
import { RNS3 } from 'react-native-aws3';


class CameraApp extends Component {
  constructor() {
    super();

knowbody

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

const colors = [
  'salmon', 'tomato', 'gold', 'yellowgreen', 'deepskyblue',
  'mediumspringgreen', 'darkturquoise', 'lightcoral', 'teal',
  'maroon', 'mediumseagreen', 'peru', 'plum', 'cadetblue',
  'darkorchid', 'palevioletred', 'lightgreen', 'limegreen',
  'indigo', 'coral', 'chocolate', 'orangered', 'lightskyblue'
];

knowbody

{"version":1.02,"files":[{"file":".gitignore","content":{"type":"Buffer","data":[98,108,111,98,45,115,116,111,114,101,10,99,111,109,112,105,108,101,45,99,97,99,104,101,10,100,101,118,10,115,116,111,114,97,103,101,10,46,110,111,100,101,45,103,121,112,10,46,110,112,109,10]}},{"file":"config.cson","content":{"type":"Buffer","data":[34,42,34,58,10,32,32,34,97,116,111,109,45,109,97,116,101,114,105,97,108,45,117,105,34,58,10,32,32,32,32,99,111,108,111,114,115,58,10,32,32,32,32,32,32,97,98,97,115,101,67,111,108,111,114,58,10,32,32,32,32,32,32,32,32,97,108,112,104,97,58,32,49,10,32,32,32,32,32,32,32,32,98,108,117,101,58,32,50,52,51,10,32,32,32,32,32,32,32,32,103,114,101,101,110,58,32,49,53,48,10,32,32,32,32,32,32,32,32,114,101,100,58,32,51,51,10,32,32,32,32,32,32,112,114,101,100,101,102,105,110,101,100,67,111,108,111,114,58,32,34,66,108,117,101,34,10,32,32,32,32,102,111,110,116,115,58,32,123,125,10,32,32,32,32,116,97,98,115,58,10,32,32,32,32,32,32,116,105,110,116,101,100,84,97,98,66,97,114,58,32,116,114,117,101,10,32

knowbody

// components/Bar.js

import { doSomething } from '../actions';

// ...

// this.props.dispatch(doSomething());