An abstraction on top react-native-navigation with simplified, opinionated API
A singleton that handles App actions
const app = new App()
.withTopBar({noBorder: true, backButton: {icon: backIcon, color: 'black'}})
.withLayout({componentBackgroundColor: 'grey'});
Set status bar options
Set layout options
Set top bar options
set bottom tabs options
set bottom tab options
Merge options with arbitrary set of options
Clear options
Set options as default app style
A singleton that handles Root actions
import {Root} from 'rnn-copilot';
Root.withBottomTab(...).withBottomTab(..).set();
// Or
Root.clear().withSingleStack('mainScreen').set();
Set a single stack layout with a main screen or with a stack of screens
Add a single bottom tab to root layout
Pass props to the main screen Pass an array of props in case you want to pass to a stack of screens
Pass options to the main screen Pass an array of options in case you want to pass to a stack of screens
Clear current layout settings in order to start a new one
Set root with current layout configuration
Manually change selected tab
import {TopBar} from 'rnn-copilot';
new TopBar().
.withTitle('title', {color: 'red'})
.withSubtitle(subtitle, {color: 'red'})
.update();
Executes RNN mergeOption API
Change top bar's background color. pass options for advanced configuration
Updates title text with support for passing customizable options
Updates subtitle text with support for passing customizable options
Updates top bar visibility
Should next update be animated
Toggle top bar transparency where content is drawn behind
Add a single left button (pushes to existing buttons)
Set multiple left buttons
Add a single right button (pushes to existing buttons)
Set multiple right buttons
Update a specific right button
import {StatusBar} from 'rnn-copilot';
new StatusBar(componentId).withBackground('red')
Set component id where the status should update
Set status bar visibility
Set status bar transparency
Set status bar background color
Set status bar style with dark/light scheme
import {StaticOptions} from 'rnn-copilot';
class MyScreen extends React.Component {
static options() {
return (
new StaticOptions()
.withTopBar(new TopBar().withTitle('My Screen'))
.get()
);
}
}
Set a topBar using the TopBar class
Set a statusBar using the StatusBar class
Set custom set of StaticOptions options
Returns the static options object
import {BottomTab} from 'rnn-copilot';
new BottomTab(tabId, screenId).withLabel(tabLabel)
Set tab label
Retrieve (RNN) layout object
import {Events} from 'rnn-copilot';
class MyScreen extends React.Component<ScreenProps> {
events = new Events(this.props.componentId).withBindAllEvents(this);
// Or
events = new Events(this.props.componentId).withEvents({
componentDidAppear: callback1,
navigationButtonPressed: callback2,
});
}
Bind all navigation events with the given component
Bind specific navigation events with the given events listener
- Setup a build in CI
- Create a StaticOptions component that combines all options
- Support showing loader as right button (there's an issue)
- Support easier ways to set app default styles for common behaviors
- dismissing a pageSheet modal on iOS doesn't trigger didAppear event which breaks our push functionality.
- After setting a custom right button (loader) - mergeOptions stops working completely
- StatusBar update doesn't work on iOS
- iOS - TopBar withBorder doesn't work when using update