Creating a screen
Easy way to create a Screen
Adding single screen:
When using Nano, creating components is little bit different from a typical react native project. In Nano, we create component in the form of JSON and add it to RNNano component. Nano will render the component on screen.
For example, below is the text component.
import { NANO } from 'react-native-nano';
const text = {
component: NANO.TEXT,
name: 'text',
value: 'This is the sample text',
props: {
style: {
},
},
};
const screen = {
name: 'WelcomeScreen',
screen: {
v1: [text],
},
style: { flex: 1, justifyContent: 'center' },
};
nano makes it easy to place components in horizontal and vertical directions in a screen. it uses horizontal and vertical keys read more about them here. And after that simply add it to the RNNano component like below
import {RNNano} from 'react-native-nano';
...
const App = () => {
return <RNNano screens={[screen]} />;
};
export default App;
Nano uses react-native-paper components by default.
Adding multiple Screens:
You can actually add as many screens as you want to RNNano component just like below
const App = () => {
return <RNNano screens={[
screen1,
screen2,
screen3,
screen4
...
]} />;
};
export default App;
Component Parameters:
While creating components in JSON structure, these are the keys can be implemented.
Keys | Required | Description |
---|---|---|
component | yes | The name of the inbuilt component see here for the whole list. |
name | yes | The unique name one must provide for later use with no spaces. |
value | no | The default value of the component if it is input component, otherwise leave it. |
props | no | props related to that component, see react-native-paper |
content | no | it takes another component as JSON. It will be nested inside. It will only be used when there is possibility of nesting. Ex: NANO.VIEW |
animation | no | Nano uses react-native-animatable to make animations work, for example animation value can be
|
hide | no | if hide is 'true', component will be removed |
platform | no | You can set this for rendering component only for specfific platforms. Example, `android|ios|web`, `android`, `ios`, `ios|android` etc. if not specified, component will be rendered in all platforms(web, android and ios). |
network | no | You can connect to remote server see here for more deatils |
onPress | no | onPress method is called when user clicks on the component. |
onLongPress | no | onLongPress method is called when user long clicks on the component. |
Screen Parameters:
While creating screen components in JSON structure, these are the keys can be implemented.
Keys | Required | Description |
---|---|---|
name | yes | The unique name of the screen in with no spaces, example WelcomeScreen and LoginScreen .etc. |
screen | yes | Add all the screen components to this key in either using vertical (v1, v2, v3, v4, v5 ..... vn ) or horizontal (h1, h2, h3, h4, h5 ..... hn) keys. for more details check here. |
style | no | The style to apply for parent view of the screen. |
onStart | no | This method is called when screen is mounted. |
onEnd | no | This is method is called when screen is unmounted |
screenProps | no | You can add all the screen props those available to Stack.Screen in react-navigation |
logic | no | Instead of implementing methods to onPress or onLongPress or any other methods directly in JSON structure for a component, you can provide those methods here in an object. For example,
and then you can reference this method in your component like this
|