rn-navigation-buttons

React Native Navigation Buttons

Getting started

npm install --save rn-navigation-buttons

This project uses react-native-svg to display icons.

Install it following the instructions on their repo.

Basic use

import React from 'react';
import NavigationButtons from 'rn-navigation-buttons';
 
function App() {
  const onNextPress = () => {
    console.log('next!');
  };
 
  const onBackPress = () => {
    console.log('back!');
  }
 
  return (
    <NavigationButtons
      nextCallback={onNextPress}
      backCallback={onBackPress}
    />
  );
}
 
export default App;

Props

navigation

Param you can pass if you use react-navigation.

data

Object. Data to pass to the next screen if you use react-navigation.

withText

Boolean. Whether to show text in the buttons. Defaults to true.

withIcons

Boolean. Whether to show icons in the buttons. Defaults to false.

iconPadding

Number. Pretty self-explanatory... Padding for the icons. Defaults to 0.

nextScreen

String. Name of the screen to advance to if you use react-navigation.

hideBack

Boolean. Whether to hide the back button. Defaults to false.

backText

String. Text to display in the back button. Defaults to 'Back'.

backIcon

SVG component created using SVGR. Defaults to iOS or Android back arrow icon based on platform.

isBackDisabled

Boolean. Whether the back button should be disabled. Defaults to false.

backCallback

Function. Function to call when pressing the back button (optional).

hideNext

Boolean. Whether to hide the next button. Defaults to false.

nextText

String. Text to display in the next button. Defaults to 'Next'.

nextIcon

SVG component created using SVGR. Defaults to iOS or Android forward arrow icon based on platform.

isNextDisabled

Boolean. Whether the next button should be disabled. Defaults to false.

nextCallback

Function. Function to call when pressing the next button (optional).

Example

For a complete example please look at App.js.