Android Warning: Native component for "RCTMap" does not exist - reactjs

I created a react native project and I am trying to use a map for Android. I am using airbnb react-native-maps package, as suggested in the Facebook react native page.
I followed the instructions, added my google api key in the manifest. In iOS it works perfectly, however on Android it gives me a warning and it does not show me the map: "Warning: Native component for 'RCTMap' does not exist".
Here is my code:
import React, { Component } from 'react';
import { Text, View, TouchableHighlight, MapView } from 'react-native';
import Header from '../common/header';
import HomeStyleSheet from '../../style/home/homeStyleSheet';
export default class Results extends Component{
//...
render(){
return (
<View style={{ marginTop: 20 }}>
<Header headerText='RESULTS'>
</Header>
<MapView
style={{ height: 300, marginLeft: 0, marginRight: 0 }}
showsUserLocation={true}
region={{
latitude: 43.683470,
longitude: -79.318006,
latitudeDelta: 0.03,
longitudeDelta:0.03
}}/>
<View style={{ height: 5, backgroundColor: 'blue' }}/>
</View>
);
}
}
What am I doing wrong? Why am I getting the warning? I searched similar problems here but almost everyone said to use airbnb react-native-maps (and l did). Thanks everyone

I can close the question. Between all the changes I did to make it work,I didn't realize I was importing MapView from 'react-native' instead of 'react-native-maps'. Fixed it:
import MapView from 'react-native-maps';

Related

React 18 createRoot error in React Native

I am working on a project in react native. I am getting a warning related to React 18. The message is Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.
I have searched to resolve this but I only found the solution related to reactjs not react native.
Please help me to solve this.
App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Starting New Native Projecsft</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

BottomTabNavigator coming on top instead of bottom in React Native expo mobile app

I am developing a mobile react native expo app. I am using BottomTabNavigator (NavigationContainer). As the name suggests it should appear at the bottom but it is incorrectly appearing on top.
I already have another image (logo.png) on the top of the screen and the navigationbar (or NavigationContainer) is also coming on top and overlapping above the image. Please help me resolve this issue. See my code below:
In the below code MyTabs is the Navigator created from createBottomTabNavigator(). This is incorrectly appearing on top of the screen.
import React from 'react';
import { Image, StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from 'react-native';
import logo from './assets/logo.png';
import { NavigationContainer } from '#react-navigation/native';
import MyTabs from './navigator/AppNavigator';
export default function App() {
return (
<SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight: 0 }} >
<View>
<View style={styles.container}>
<Image source={logo} style={{ width: 100, height: 100 }} />
<Text style={{color: '#888', fontSize: 18, alignItems: 'center'}}>
To share a photo from your phone with a friend or anyone, just press the button below!
</Text>
</View>
<View >
<NavigationContainer >
<MyTabs /> // This is incorrectly coming on top of screen.
</NavigationContainer>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
// justifyContent: 'center',
},
});
The NavigationContainer should be the outermost component in App. This then wraps the Tab.Navigator component (in your case MyTabs), where you create tabs linked to each of your components. Inside your components, you are able to utilize SafeAreaView to then display the image at the top of the screen. Any type of Navigation scheme has to be made the top most component in the hierarchy in react native, wrapping the rest of your components. I've altered your code below:
import React from 'react';
import { Image,  StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
export default function App() {
  const Tab = createBottomTabNavigator()
  return (
    <NavigationContainer >
      <Tab.Navigator>  
        <Tab.Screen name="Home" component={myComponent} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
const myComponent = () => {
  return (
    <SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight: 0 }} >
      <View>
        <View style={styles.container}>
          <Image source={require('#expo/snack-static/react-native-logo.png')} style={{ width: 100, height: 100 }} />
          <Text style={{color: '#888', fontSize: 18, alignItems: 'center'}}>To share a photo from your phone with a friend or anyone, just press the button below!</Text>
        </View>
      </View>
    </SafeAreaView>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
     alignItems: 'center',
    // justifyContent: 'center',
  },
});

Native Base Content is empty when using React Navigation 5

I am trying to create a basic app with React Navigation 5 and Native Base. But it seems like React Navigation overrides of Native Base. The Content does not render simple text.
/**
* #format
*/
import React from 'react';
import 'react-native-gesture-handler';
import { AppRegistry } from 'react-native';
import NavigationInitializer from './route/NavigationSetup';
import { name as appName } from './app.json';
import { LogBox } from 'react-native';
import { Root, Container, Content, Header, Text, Footer } from 'native-base';
LogBox.ignoreAllLogs(); // remove unnecessary warnings
// This is useful when there's a noisy warning that cannot be fixed, like those in a third-party dependency.
// AppRegistry.registerComponent(appName, () => NavigationInitializer);
AppRegistry.registerComponent(appName, () => () =>
<Container>
<Header>
<Text style={{ color: "black" }}>
HEADER
</Text>
</Header>
<Content style={{ backgroundColor: "red" }}>
<Text style={{ color: "black" }}>
This is Content Section
</Text>
</Content>
<Footer>
<Text style={{ color: "black" }}>
This is Footer Section
</Text>
</Footer>
</Container>
);
Ok. I resolved it by upgrading React native and native base.
https://github.com/GeekyAnts/NativeBase/issues/3204#issuecomment-667596807

Create multiple curve points in react native component

I am currently developing a react native app, and for my login screen it has a background that has two points where the component changes its curve. Attached is the image as it can better show what it looks like then I can explain it. I was wondering if it would be possible to recreate this screen in React Native. I have access to react-native-svg but I am using expo.
As you can see, there is two curves to the blue background/component part of the screen. (This is a mockup created in Figma, not yet implemented in an App) How would I go about designing this in react native?
To use SVGs you have to use react-native-svg. Expo has it built in, though you can install it in any react-native package. You can read more about react-native-svg here.
It is fairly straight forward to use the library. As you already have a path for the SVG you can just use the Path property to draw the path on the screen.
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, TextInput } from 'react-native';
import { Constants, Svg } from 'expo';
const WIDTH = Dimensions.get('screen').width;
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Svg height={300} width={WIDTH}>
<Svg.Path
d="M-17.5 378.5C31.5 32.5 302.5 463 375 89C447.5 -285 375 644 375 644H0C0 644 -66.5 724.5 -17.5 378.5Z" // put your path here
fill="blue"
stroke="blue"
/>
</Svg>
<View style={{backgroundColor: 'blue', flex: 1}}>
<View style={{width: WIDTH - 60, height: 60, backgroundColor:'white', borderRadius: 30, margin: 30, justifyContent: 'center', paddingLeft: 10}}>
<TextInput
placeholder='email'
/>
</View>
</View>
</View>
);
}
}
You can see it working in the following snack https://snack.expo.io/#andypandy/svg-example
This is what it looks like on an iPhone X
Umm I would do this few different way such a svg (react-native-svg) but why do that much hard work when this can be achievable just using an background image.
Use ImageBackground (https://facebook.github.io/react-native/docs/imagebackground) and fix this easily. Then add the logo and the login container as children.
Let me know if this works for you. :)
EDIT:
You might want to look at https://github.com/vault-development/react-native-svg-uri as well.

Unable to resolve module. Module `screens/Screen` does not exist in the Haste module map

I've been working with React Native recently trying to produce a mobile application. I'm planning on using the react-navigation plugin in order to allow the user to change screens. However, when I import the screen (ScreenOne.js) into the App.js. However, I get the error:
Unable to resolve module `screens/ScreenOne` from `C:\Users\User\Desktop\Projects\LRAPPMAIN\App.js`: Module `screens/ScreenOne` does not exist in the Haste module map
This is strange as I only get this error when importing it. My code is as follows:
ScreenOne.js
import React, {Component} from 'react';
import {Button, Text, View} from 'react-native';
export class ScreenOne extends Component {
render() {
return (
<View>
<Text>This is the Settings screen</Text>
<Button title="Home"/>
</View>
)
};
export default ScreenOne;
App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import ScreenOne from 'screens/ScreenOne'
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Is there anything I'm doing wrong here?
When you import something on react and don't use relative paths, it will always look inside your node-modules folder.
What you probably want to do on your App.js file is
import ScreenOne from './screens/ScreenOne';
This way, react will not look for the file relative to your current one.
also
you forgot to close one curly bracket on your ScreenOne.js file.

Resources