Code Samples

Rotas

Utilizado para criar as transações entre as telas.

$ npm install --save react-navigation

//Import da lib
import { createStackNavigator } from 'react-navigation';
.
.
.
// Cria rota dos componentes
export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});

App Intro

Slide intro do aplicaitvo.

$ npm i react-native-app-intro --save
$ npm i https://github.com/merryjs/react-native-app-intro --save

//Import da lib
import AppIntro from 'react-native-app-intro';
.
.
.
    render() {
        return (
            <AppIntro customStyles={{ btnContainer: { flex: 1 } }}>
                <View style={[styles.slide, { backgroundColor: '#fa931d' }]}>
                    <View level={10}><Text style={styles.text}>Page 1</Text></View>
                    <View level={15}><Text style={styles.text}>Page 1</Text></View>
                    <View level={8}><Text style={styles.text}>Page 1</Text></View>
                </View>
                <View style={[styles.slide, { backgroundColor: '#a4b602' }]}>
                    <View level={-10}><Text style={styles.text}>Page 2</Text></View>
                    <View level={5}><Text style={styles.text}>Page 2</Text></View>
                    <View level={20}><Text style={styles.text}>Page 2</Text></View>
                </View>
                <View style={[styles.slide, { backgroundColor: '#fa931d' }]}>
                    <View level={8}><Text style={styles.text}>Page 3</Text></View>
                    <View level={0}><Text style={styles.text}>Page 3</Text></View>
                    <View level={-10}><Text style={styles.text}>Page 3</Text></View>
                </View>
                <View style={[styles.slide, { backgroundColor: '#a4b602' }]}>
                    <View level={5}><Text style={styles.text}>Page 4</Text></View>
                    <View level={10}><Text style={styles.text}>Page 4</Text></View>
                    <View level={15}><Text style={styles.text}>Page 4</Text></View>
                </View>
            </AppIntro>
        );
    }

Tab

$ npm install react-native-material-bottom-navigation
$ npm install react-native-vector-icons --save

Configurar os icones

//Import da lib
import BottomNavigation, { FullTab } from 'react-native-material-bottom-navigation'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
.
.
.
    tabs = [
        {
            key: 'games',
            icon: 'gamepad-variant',
            label: 'Games',
            barColor: '#388E3C',
            pressColor: 'rgba(255, 255, 255, 0.16)'
        },
        {
            key: 'movies-tv',
            icon: 'movie',
            label: 'Movies & TV',
            barColor: '#B71C1C',
            pressColor: 'rgba(255, 255, 255, 0.16)'
        },
        {
            key: 'music',
            icon: 'music-note',
            label: 'Music',
            barColor: '#E64A19',
            pressColor: 'rgba(255, 255, 255, 0.16)'
        }
    ]

    renderIcon = icon => ({ isActive }) => (
        <Icon size={24} color="white" name={icon} />
    )

    renderTab = ({ tab, isActive }) => (
        <FullTab
            isActive={isActive}
            key={tab.key}
            label={tab.label}
            renderIcon={this.renderIcon(tab.icon)}
        />
    )

    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1 }}>
                    {/* Your screen contents depending on current tab. */}
                </View>
                <BottomNavigation
                    onTabPress={newTab => this.setState({ activeTab: newTab.key })}
                    renderTab={this.renderTab}
                    tabs={this.tabs}
                />
            </View>
        );
    }

Shimmer Effect

Utilizado para efeito de load parecido com o do Facebook.

$ npm install react-native-linear-gradient
$ npm install react-native-shimmer-placeholder
$ react-native link react-native-linear-gradient

//Import da lib
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
.
.
.
    render(){
        return(
            <ShimmerPlaceHolder
                style={styles.shimmerComponent}
                autoRun={true}
                visible={this.state.visible}>
                <Text style={styles.username}>Usuário {index}</Text>
            </ShimmerPlaceHolder>
        );
    }

React Native Vector Icons

Add some icons to React Native Apps!!!

$ npm install react-native-vector-icons
$ react-native link react-native-vector-icons

iOS

Option: Manually

If you want to use any of the bundled icons, you need to add the icon fonts to your Xcode project. Just follow these steps:

Browse to node_modules/react-native-vector-icons and drag the folder Fonts (or just the ones you want) to your project in Xcode. Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder.
Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won't autocomplete/not using Xcode) and type in the files you just added. It will look something like this:

Note: you need to recompile your project after adding new fonts, also ensure that they also appear under Copy Bundle Resources in Build Phases.

If you want to use the TabBar/NavigatorIOS integration or use getImageSource, then you need to add RNVectorIcons.xcodeproj to Libraries and add libRNVectorIcons.a to Link Binary With Libraries under Build Phases. More info and screenshots about how to do this is available in the React Native documentation.

Option: With `react-native link`

$ react-native link react-native-vector-icons

Note: Some users are having trouble using this method, try one of the others if you are too.

Option: With CocoaPods

Add the following to your Podfile and run pod update:

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

Edit Info.plist as described above.

If you are using use_frameworks! in your Podfile you instead need to dynamically load the icon font by doing Icon.loadFont() when boostrapping your application.

Note: You must be consuming React itself via CocoaPods for this to work, see React Native documentation on how to set that up.

Android

Option: With Gradle (recommended)

This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

To customize the files being copied, add the following instead:

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Option: Manually

Copy the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase font folder).

Integrating library for `getImageSource` and `ToolbarAndroid` support

These steps are optional and only needed if you want to use the Icon.getImageSource function or using custom icons in the Icon.ToolbarAndroid component.

Edit android/settings.gradle to look like this (without the +):

rootProject.name = 'MyApp'

include ':app'

+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Edit android/app/build.gradle (note: app folder) to look like this:

apply plugin: 'com.android.application'

android {
  ...
}

dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
+ compile project(':react-native-vector-icons')
}

Edit your MainApplication.java (deep in android/app/src/main/java/...) to look like this (note two places to edit):

package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

....

  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage()
+   , new VectorIconsPackage()
    );
  }

}

Note: If you're using React Native (Android) <= 0.17, follow this instructions

import React, { Component } from 'react'
import { TouchableOpacity, Text } from 'react-native'
// import the Icon component
// after the backSlash you have to choose what lib icons user
// ONE OF THIS
// AntDesign by AntFinance (297 icons)
// Entypo by Daniel Bruce (411 icons)
// EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
// Feather by Cole Bemis & Contributors (v4.7.0, 266 icons)
// FontAwesome by Dave Gandy (v4.7.0, 675 icons)
// FontAwesome 5 by Fonticons, Inc. (v5.3.1, 1341 (free) 3978 (pro) icons)
// Foundation by ZURB, Inc. (v3.0, 283 icons)
// Ionicons by Ben Sperry (v4.2.4, 696 icons)
// MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
// MaterialCommunityIcons by MaterialDesignIcons.com (v2.8.94, 2894 icons)
// Octicons by Github, Inc. (v8.0.0, 177 icons)
// Zocial by Sam Collins (v1.0, 100 icons)
// SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)
import Icon from 'react-native-vector-icons/Ionicons'

class ButtonWithIcon extends Component {
  render () {
    return (
      <TouchableOpacity
        style={{
          backgroundColor: 'steelblue',
          width: '90%',
          padding: 5,
          flexDirection: 'row',
          justifyContent: 'space-around',
          alignItems: 'center'
        }}>
        <Text>Click!!!</Text>
        <Icon name='ios-user' color='#FF5722' size={25} />
      </TouchableOpacity>
    )
  }
}

export default ButtonWithIcon

Name		Name	Last commit message	Last commit date
android		android
components		components
ios		ios
.babelrc		.babelrc
.buckconfig		.buckconfig
.flowconfig		.flowconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.watchmanconfig		.watchmanconfig
App.js		App.js
README.md		README.md
app.json		app.json
index.js		index.js
package-lock.json		package-lock.json
package.json		package.json

Navigation Menu

Repository files navigation

Code Samples

Rotas

App Intro

Tab

Shimmer Effect

React Native Vector Icons

iOS

Option: Manually

Option: With `react-native link`

Option: With CocoaPods

Android

Option: With Gradle (recommended)

Option: Manually

Integrating library for `getImageSource` and `ToolbarAndroid` support

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Code Samples

Rotas

App Intro

Tab

Shimmer Effect

React Native Vector Icons

iOS

Option: Manually

Option: With react-native link

Option: With CocoaPods

Android

Option: With Gradle (recommended)

Option: Manually

Integrating library for getImageSource and ToolbarAndroid support

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Option: With `react-native link`

Integrating library for `getImageSource` and `ToolbarAndroid` support