Develop Reference

Unable to use native iOS component in react-native WebView

I have a native swift component PhoneWebView I use this to display click to call phone links web views by inheriting it in my JS file. Although I am using if(Platform.OS === 'ios'){ in my previous file call to display different content for iOS and Android still I am getting the below error not sure what's missing. Could someone please correct me?
https://i.stack.imgur.com/pTQtS.png
ERROR Invariant Violation: Tried to register two views with the same name ATMWebView
This error is located at:
in FileRenderWebView (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneVie
import React, { } from 'react';
import {requireNativeComponent, SafeAreaView, StatusBar} from 'react-native';
import {useFocusEffect} from '#react-navigation/native';
export default function FileRenderWebView({route, navigation}) {
const PhoneWebView = requireNativeComponent('ATMWebView');
useFocusEffect(
React.useCallback(() => {
console.log("filerenderwebview----****");
}, [route.params]))
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView style={{flex: 1}}>
<PhoneWebView
uri="https://www.apple.com/contact/"
style={{flex: 1}}
onLoaded={pageLoaded}
/>
</SafeAreaView>
</>
)
}

Because you import directly native UI component, it will be reloaded when you use hot reloading or fast refresh.
my solution:
split requireNativeComponent to another file (in case i call ATMWebViewComponent.js) like this:
import { requireNativeComponent } from 'react-native';
const ATMWebView = requireNativeComponent('ATMWebView');
export default ATMWebView;
then in the place you just need to import it and use:
import ATMWebView from 'path_to_ ATMWebViewComponent.js_file'

SCSS files in React Native - import and usage

I'm new to React Native and I wanted to implement a floating button in my React Native App like the one here: https://bit.dev/khaledebdelli/components/fancy-floaty-button
I tried importing the package for the button using npm from Terminal but it said the file didn't exist so I saved the scss file provided in my project directory.
I exactly followed the instructions from this link: https://github.com/kristerkari/react-native-sass-transformer in order to use scss files in React Native.
However, the floating button did not appear in my app. Here is what I tried to do in code:
Inside BackButton.js:
import 'react-native-gesture-handler';
import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useNavigation } from '#react-navigation/native';
{/* CSS file imported in below line of code */}
import styles from './styling/floatButton.scss'
export default function BackButton(props) {
const navigation = useNavigation();
console.log(props.title)
return (
<TouchableOpacity
style={styles.btn}
onPress={() => navigation.navigate(props.to, props.toTransfer)}
>
<Text>
{props.title}
</Text>
</TouchableOpacity>
);
}
Inside hash-tables.js where I imported BackButton.js and rendered the BackButton component:
import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import BackButton from '../Components/BackButton';
{*/Below line of code is inside the render function of a class component/*}
<BackButton title='Previous' to='Topics' />
This is what I see in my app instead of the floating button:
Would appreciate it if someone could point out where I may have gone wrong :)

Im guessing you don't have sass installed correctly, I usually just do: "npm install node-sass" in the front-end and works everytime :)

React native navigation (undefined is not an object .. this.props.navigation.navigate

I have a trouble regarding this issue on react native navigation by the way I am using redux.
Listserviceaction.js
contains webservicecall component is being imported here
import ListComponent from '../components/ListComponent';
Listactiontype.js
contains action ActionTypes
export const SERVICE_PENDING = 'service_pending' and etc.
listcomponent.js
the component, renders data on a list etc
reducers
and then the reducer Part
scenes/List.js
store binding will be done within the initial point of the application and passed down to the other application components as shown below.
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from '../reducers/index';
import ServiceAction from '../actions/listserviceaction';
import { Container, Content, Picker, Button, Text } from "native-base";
export default class RenderList extends Component {
render() {
return (
<Provider store={store}>
<ServiceAction />
</Provider>
);
}
}
now after the component is being loaded and when i click onPress={() => this.props.navigation.navigate("ProfileScreen")} on my
listcomponent it fires an error (undefined is not an object .. this.props.navigation.navigate) any problem ? any better solution?
Thank You.

Include on your ServiceAction the this.props.navigation something like this:
<ServiceAction navigation={this.props.navigation}/>
because the props.navigation are by default on your parent component
and on ServiceAction component you will access to navition like:
..
goToSignUp() {
this.props.navigation.navigate('SignUp');
}
..
For me also was confusing before. Cheers!

for navigating from one screen to other, both the screens should be in StackNavigator. Can you please show your stacknavigator and code of the screens you are trying to navigate between.

for using react navigation you must do this steps:
1: npm i react-navigation --save
2: npm link react-navigation
3: modify a top level class for your stack like this :
import page_1 from 'YOUR_PAGE1_PATH'
import page_2 from 'YOUR_PAGE2_PATH'
import { createStackNavigator } from 'react-navigation'
export default createStackNavigator({
p1 : page_1 //remember the first modified shown first
p2 : page_2
})
then in page_1 if you want to navigate to page 2 :
onPress(()=> this.props.navigation.navigate('p2' , 'maybe other params'))
Note : you must call p1,p2 instead of page_1 or page_2!

React-native "Attempted to assign to readonly property"

How I got where I am(you can skip to next paragraph)
Recently I picked up react-native for mobile development and it was hell, spent 3 hours googling solutions why isn't my react-native init project even run, after downgrading a couple of packages I was able to run this blank app fine, but soon after, I was still receiving errors that didn't seem to be even from my code.. So 3 days into development and chill where I have seen nothing more, but various errors and I didn't progress with the app at all.
My latest issue I can't solve for quite some time:
So the error I am getting is "Attempted to assign to readonly property". Now the stack trace always points to node_modules/../ReactNativeRenderer-dev.js
this is my code that has almost nothing in it and still reproduces the issue
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import { createStackNavigator} from 'react-navigation';
// routes
//import HeaderComp from './src/components/headerComp';
//import NavigatorDiv from './src/router';
class Home extends React.Component{
render() {
return <Text> hello this is home </Text>
}
}
class List extends React.Component{
render() {
return <Text> hello this is List </Text>
}
}
const NavigatorDiv = createStackNavigator({
Home: {
screen: Home
},
MusicListView: {
screen: List
},
}, {
initialRouteName: 'Home',
});
type Props = {};
export default class App extends React.Component<Props> {
render() {
return <NavigatorDiv/>
}
}
EDIT
So it appears that the only way to fix something in react-native is to downgrade it even more, I started with 0.56, maybe by the end of this week I will reach the first alpha, anyways, the error is fixed, the code runs fine with this setup:
react-native-cli: 2.0.1
react-native: 0.50.0

In my case; I was using npm primarily in a project & accidentally executed a yarn command. By diving deep, I observed two lock files. Deleting yarn-lock.json did the trick for me.

Can't find variable React - Even though it is not used in file

I am getting a "Can't find variable: React" error in my react native project. But, what baffles me is that I am not at all using React in that file, although, I am importing a custom component which uses it though. Here is a MCVE of my problem.
First up construction.js:
import React from 'react';
import { View, Text } from 'react-native';
class UnderConstruction extends React.Component {
render() {
return (
<View>
<Text style={{ padding: 75 }}>
This page is under construction :(
</Text>
</View>
);
}
}
export default UnderConstruction;
Next up, render.js:
import UnderConstruction from './construction';
export function render() {
return (
<UnderConstruction />
);
}
And lastly, index.ios.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import * as Factory from './render';
class Demo extends React.Component {
render() {
return Factory.render();
}
}
AppRegistry.registerComponent('Demo', () => Demo);
Running this app will cause the error Can't find variable: React on render.js line number 5, which is:
<UnderConstruction />
I found out the problem can be solved by just adding an import statement for React on render.js like:
import React from 'react';
import UnderConstruction from './construction';
...
I am curious as to why should I import React even though I am not using it in render.js, hence this question. So, what causes Can't find variable: React error in my render.js file?

To use render function you need to import React in your file because react creates your elements. I would suggest you go through your transpiled Javascript file once, you will understand what I mean.
I was myself facing this issue sometime back and when I saw the transpiled JS file and I then I saw how it works.
So in your transpiled file it would be something similar to this:-
(0, _reactDom.render)(_react2.default.createElement(_Root2.default, { store: store, history: history }), document.getElementById('app'));