React Native - Router Flux - Empty Scene For Key Error - ios

I am getting an error when using the following code in my index.ios.js file:
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { Actions, Router, Route, Scene } from 'react-native-router-flux';
import {Categories} from './Components/Categories';
import {CarRacing} from './Components/CarRacing';
const scenes = Actions.create(
<Scene key="root">
<Scene key="Categories" name="Categories" component={Categories} title="Categories" initial={true}/>
<Scene key="CarRacing" name="CarRacing" component={CarRacing} title="CarRacing"/>
</Scene>
);
export default class Motorsport extends Component {
render() {
return (
<Router scenes={scenes}/>
);
}
}
AppRegistry.registerComponent('Motorsport', () => Motorsport);
Categories are a list of categories in a tableview done by 'react-native-tableview'. When clicking on the the CarRacing TableView row, I get the following error:
route.children.forEach is not a function. (In 'route.children.forEach(function(r,i) {(0,_Util.assert)(scenes[r],'Empty scene for key='+route.key);if*scenes[r].inital) {index=i;}})','route.children.forEach' is undefined)
I am not sure what I have done wrong here. I understand the error, but I don't quite get what I did in my code to mess this up.
Any ideas? Thanks!

Related

NativeScript Button Not Working on iOS But Works on Android

I have a Github page that I will link to that has all of my code. So basically, I'm using Angular 8 along with NativeScript to build my first app. I've been following a Udemy tutorial and decided to have a series of components. A Menu component which serves as my Home routing path and a series of child routes. The Menu has a TabView which when each tab is clicked, it opens a different component. Right now, I have an About component, a Store component, and a Join component. When each child component route is opened, I wanted to have a BUTTON attach to each child route that routed to another page when clicked. So a button on the About Component that leads to an About Details component that will just have text about the company.
The problem is either with my routing or the page-router-outlet on iOS. I have an iPad and an Android phone I'm using to test things until I get a new Mac to set up the emulators. When I use the page-router-outlet in a certain location on the about-tab.component.html page, it works fine on Android and opens up the About Details component. But on iOS, nothing happens. I click the button...and nothing moves at all.
I've tried moving the page-router-outlet to different locations on the about-tab.component.html file and it either completely breaks the About tab on iOS and the screen is blank (and doesn't show anything, not even the words), or it stays the same. I created a GitHub page...
https://github.com/eoscryptodev/Best-Laces-Out
I've also tried to move around the location of the routes themselves. I tried making the About Details component a child of the About Component, which is a child of the Home component (Main). I also tried putting the component on the same level as the Home (Menu) component.
app-routing.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { NativeScriptCommonModule } from 'nativescript-angular/common';
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { Routes } from '#angular/router';
import { MenuComponent } from './menu/menu.component';
import { AboutComponent } from './menu/about/about.component';
import { ShopComponent } from './menu/shop/shop.component';
import { JoinComponent } from './menu/join/join.component';
import { AboutDetailsComponent } from './menu/about-details/about-details.component';
//import { BottomTabComponent } from './tabs/bottom-tab/bottom-tab.component';
//import { JoinPageComponent } from './pages/join-page/join-page.component';
//FIX: You want the path to go from OurHistory(the menu option) to OutHistoryPage. Also figure out how to add the menu to the bottom of the pages.
// Maybe create an ns-path for the BottomTabBar that can be placed on HTML pages.
const routes: Routes =
[
{ path: '', redirectTo: '/home/(HistoryOutlet:OurHistory//MerchOutlet:OurMerch//ClubOutlet:OurClub)', pathMatch: 'full' },
{ path: 'home', component: MenuComponent, children:
[
{ path: 'OurHistory', component: AboutComponent, outlet: 'HistoryOutlet'},
{ path: 'HistoryDetails', component: AboutDetailsComponent, outlet: 'HistoryOutlet' },
{ path: 'OurMerch', component: ShopComponent, outlet: 'MerchOutlet' },
{ path: 'OurClub', component: JoinComponent, outlet: 'ClubOutlet' },
]}, // a root route with an empty path. The route that is loaded when our app starts. SHOULD BE LOGO IMAGE!!
]
about-tab.component.html
<ScrollView orientation="vertical" height="500">
<StackLayout orientation="vertical" backgroundColor="white">
<page-router-outlet name="HistoryOutlet"></page-router-outlet>
<Label text="This is Our History" id="ID1"></Label>
<Button height="50"
width="200"
backgroundColor="black"
text="Who We Are"
id="about-button"
[nsRouterLink]="['/home', { outlets: { HistoryOutlet:[ 'HistoryDetails' ]}} ]">
</Button>
</StackLayout>
</ScrollView>
about-details.component.html
<ns-action-bar title="Details"></ns-action-bar>
<StackLayout>
<Button
text="Go Back"
[nsRouterLink]="['/home', { outlets: { HistoryOutlet: ['OurHistory'] } } ]"
class="about-details">
</Button>
</StackLayout>
I found my solution in the NativeScript Github docs. Under TabView Navigation. I see where I went wrong. I was close, but this answers everything.
https://github.com/NativeScript/docs/blob/6ac877dc3bd551a8e338855e07597ee24358a462/docs/core-concepts/angular-navigation.md

React Native lost control of iOS status bar after calling 3-party library

I am using a 3rd-party library it will hide iOS status bar when calling. After that, I can't show the status bar back on screen.
I can control status bar by StatusBar component in React Native normally.
However, I tried to call a iOS library https://www.dynamsoft.com/Products/dynamsoft-webcam-sdk.aspx it will hide the status bar when showing it's screen.
After it hide the status bar, I can't show it up again using StatusBar.setHidden(false).
It don't prompt any error, just simply no effect.
Anyone knows what's going on and how can I show the status bar back in this situation?
You can add the following code in your screen where you want to show your status bar
import React, { Component } from 'react';
import { StatusBar } from 'react-native';
class MyComponent extends Component {
componentDidMount() {
StatusBar.setHidden(false);
}
}
or you can also do
<StatusBar hidden={false} />
This will help you to show status bar in your desired screen
The workaround below may work.
import React, { Component } from 'react';
import { StatusBar } from 'react-native';
class MyComponent extends Component {
componentDidMount() {
setTimeout(() => {StatusBar.setHidden(false);},1000)
}
}

Twilio Flex Plugin how to add new tab with custom route

I am using Twilio Flex plugin to customize flex ui in react js.
I want to add one custom link in a sidebar with a new custom component with new route URL like '/shops'.
After loading that component in that body i want to load custom shop.
Check the following screen for more details.
Thanks in advance for a help.
I found this video by Twilio which helped.
https://www.youtube.com/watch?v=ZMjKMoy1RPc
The key points are to add a new View to the View Collection and create a new SideLink which links to it.
import { FlexPlugin } from 'flex-plugin';
import { View, SideLink, Actions } from '#twilio/flex-ui';
import React from 'react';
export default class ShopPlugin extends FlexPlugin {
constructor() {
super('ShopPlugin');
}
init(flex, manager) {
flex.ViewCollection.Content.add(
<View name="shop-view" key="shop-view">
<div>Your Shop View Goes Here</div>
</View>
)
flex.SideNav.Content.add(
<SideLink
showLabel={true}
icon="Thumbup"
iconActive="ThumbupBold"
isActive={activeView === 'shop-view'}
onClick={() => {
Actions.invokeAction('NavigateToView', {viewName: 'shop-view'});
}
>
Shops
</SideLink>
)
}
}

react native render native custom view

I follow this doc but really don't understand that how to render my customer view in js side.
I use storyboard generate a simple View and allocate it to my CustomView class which inherit UIView.
then I write MyCustomViewManager.m like below
#import "RCTViewManager.h"
#import "CustomView.h"
#interface MyCustomViewManager : RCTViewManager
#end
#implementation MyCustomViewManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
return [[CustomView alloc] init];
}
#end
finally I write js side file index.ios.js below.
import React from 'react-native';
const {AppRegistry, View, requireNativeComponent,} = React;
class Demo extends React.Component {
constructor(){
super();
}
var CustomView = requireNativeComponent('CustomView', null);
render() {
return (
<View>
<CustomView></CustomView>
</View>
);
}
}
AppRegistry.registerComponent('Demo', () => Demo);
maybe I did something wrong, I don't understand official doc mean about below code
module.exports = requireNativeComponent('RCTMap', null);
how could I represent native side CustimView in requireNativeComponent method? could you show me some code, thanks ..
This line means that you export RCTMap purely without processing any custom property
module.exports = requireNativeComponent('RCTMap', null);
as React Native Docs says,
import { requireNativeComponent } from 'react-native';
// requireNativeComponent automatically resolves this to "RCTMapManager"
module.exports = requireNativeComponent('RCTMap', null);
so requireNativeComponent receives two parameters, the first one takes the name of the component that you want to import from the bridging process before and the second takes the class that will process the native component, this is for manipulate properties and some logic inside your custom component, like that
// MapView.js
import React from 'react';
import { requireNativeComponent } from 'react-native';
class MapView extends React.Component {
render() {
return <RCTMap {...this.props} />;
}
}
MapView.propTypes = {
/**
* When this property is set to `true` and a valid camera is associated
* with the map, the camera’s pitch angle is used to tilt the plane
* of the map. When this property is set to `false`, the camera’s pitch
* angle is ignored and the map is always displayed as if the user
* is looking straight down onto it.
*/
pitchEnabled: React.PropTypes.bool,
};
var RCTMap = requireNativeComponent('RCTMap', MapView);
module.exports = MapView;
Hope this is usefull for anyone who cares about it
please checkout the React Native Docs

Can React Native produce UIButton instances in Swift?

I want to use React Native to create some buttons that are wired to trigger methods in a Swift app. Is there a way to access TouchableHighlight instances from within a Swift UIViewController or ViewController class?
There are various options for buttons which you can find on npmjs.org. Below are a couple of options.
https://www.npmjs.com/package/react-native-button
https://www.npmjs.com/package/react-native-icon-button
But you won't find a UIButton instance most likely since that is iOS specific. What you get is a touchable element which acts like a button. You can inspect the code of these modules on GitHub to see how they work.
You can do this without installing additional Node modules by wrapping a <Text> component with a <View> component:
import React from 'react'
class ExampleButton extends React.Component {
constructor(props) {
super(props);
this.pressButton = this.pressButton.bind(this);
}
pressButton() {
console.log("The button was pressed!");
}
render() {
return(
<View>
<Text onPress={this.pressButton}>
Button Text
</Text>
</View>
);
}
}

Resources