Moving between screens

How to move and pass params between screens

react-native-nano uses famous navigation package react-navigation to handle navigation and pass data between screens. You can access the navigation instance from any action method.

For example, Lets say you want to move from ScreenA to ScreenB with some parameters, you can do like below.

ScreenA:

In below code, whenever the button is pressed, it will redirect to ScreenB with parameter name .

const buttonPress = {
  component: NANO.BUTTON,
  value: 'CLICK ME TO MOVE TO SCREEN B',
  onClick: ({ navigation, uiElements}) => {
  
      // below code pushes screen to ScreenB with parameters
      navigation.push("ScreenB", { "name": "Cool"})
      
      return uiElements;
  }
};

const screen = {
  name: 'ScreenA',
  screen: {
    h1: [buttonPress],
  }
};

ScreenB:

Once the ScreenB is mounted, we can get parameters using route instance in onStart method which gets called when screen is mounted.

Read more about Screen life cycle events here.

const text2 = {
  component: NANO.TEXT,
  value: "I AM IN SCREEN B",
};

const screen = {
  name: 'ScreenB',
  screen: {
    h1: [text],
  },
  onStart: ({route, uiElements}) => {
    
      console.log(route.params["name"])

      return uiElements;
  }
};

You can use all the navigation functions like push, navigate, goBack and popToTop. Check here for more details.