I have created a react-native app in VS Code. The app is running fine in the browser with expo. Generated a keystore file and created an .apk with gradlew assembleRelease.
The .apk can be installed on my Android tablet. But after starting the app, it is not running and the splash screen is shown (see image below).
The SDK version on the tablet (30) is higher than the minSdkVersion (21) of the app.
Also added <uses-feature android:name="android.hardware.telephony" android:required="false" /> to the AndroidManifest.xml file.
Code is as follows.
index.js:
import { registerRootComponent } from 'expo';
import App4 from './App4';
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App4);
App4.js:
import React from 'react'
import List from './List.js'
const App = () => {
return (
<List />
)
}
export default App
List.js:
import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet, Image } from 'react-native'
class List extends Component {
state = {
products: []
}
componentDidMount() {
this.GetAllProducts();
}
GetAllProducts() {
//fetch("http://192.168.2.14:3000/getallproducts")
fetch("https://categoriesexpress444.herokuapp.com/getallproducts")
.then(res => res.json())
.then(jsonresult => {
this.setState({
products: jsonresult
});
console.log(this.state.products);
});
}
getsrcPath(string) { // this function distinguishes between images in UserImages folder and images on Cloudinary
var firstChar = string.charAt(0);
if (firstChar == '~') { // image is in UserImages folder and item.picture path starts wih ~/UserImages/
return string.substring(1, string.length);
}
else { // image is at Cloudinary and item.picture starts with http://
return string;
}
}
render() {
return (
<View>
{
this.state.products.map((item, index) => (
<TouchableOpacity
key = {item.id}
style = {styles.container}>
<Text style = {styles.text}>{item.productname}</Text>
<Text>{item.description}</Text>
<Text>€ {item.price}</Text>
<img src={this.getsrcPath(item.picture)} />
<Text style = {styles.text}>
{item.name}
</Text>
</TouchableOpacity>
))
}
</View>
)
}
}
export default List
const styles = StyleSheet.create ({
container: {
padding: 10,
marginTop: 3,
backgroundColor: '#ffffff',
alignItems: 'center',
cursor: 'none'
},
text: {
color: '#4f603c'
}
})
If you are using expo to create react native app then
you have to build an app over the expo using this command
expo build:adroid or expo build:ios
once the build will successfully create you will get one URL then you can use the URL to install the app on your device.
If you are using react-native-cli to create react native app then
you have to build an app over the expo using this command
./gradlew assembleRelease or ./gradlew assembleDebug in MacOs
I have been learning react native from two weeks. Now I try to learn how use firebase with react native. I follow a tutorial video in which we display our firebase data in app. I follow full tutorial and write code same as it in tutorial. But i got this Error i dont know what is the reason of it i installed almost every module that we need. But problem not solved.
My code is here :-
import React, { useEffect, useState } from "react";
import { View, Text, Button } from "react-native";
import database from '#react-native-firebase/database';
export default function App(){
function readFunction(){
const onValueChange = database()
.ref('Main/mama')
.on('value', snapshot => {
console.log('User Data:', snapshot.val());
setMama(snapshot.val());
});
}
const [name, setMama] = useState("")
useEffect(() => {
readFunction()
}, []);
return(
<View style={{flex:1, justifyContent:'space-around'}}>
<Text>
Mama = {name}
</Text>
</View>
)
}
And error is -
I'm developing an app with React Native and I'm testing with my OnePlus 6 and it has a notch. The SafeAreaView is a solution for the iPhone X but for Android, it seems there is no solution.
How to solve this kind of issue?
Do something like
import { StyleSheet, Platform, StatusBar } from "react-native";
export default StyleSheet.create({
AndroidSafeArea: {
flex: 1,
backgroundColor: "white",
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
}
});
And then In your App.js
import SafeViewAndroid from "./components/SafeViewAndroid";
<SafeAreaView style={SafeViewAndroid.AndroidSafeArea}>
<Layout screenProps={{ navigation: this.props.navigation }} /> //OR whatever you want to render
</SafeAreaView>
This should work good as get height will take care of the knotch in android device by calculating the statusBar height and it will arrange accordingly.
A work around I had to use recently:
GlobalStyles.js:
import { StyleSheet, Platform } from 'react-native';
export default StyleSheet.create({
droidSafeArea: {
flex: 1,
backgroundColor: npLBlue,
paddingTop: Platform.OS === 'android' ? 25 : 0
},
});
It is applied like so:
App.js
import GlobalStyles from './GlobalStyles';
import { SafeAreaView } from "react-native";
render() {
return (
<SafeAreaView style={GlobalStyles.droidSafeArea}>
//More controls and such
</SafeAreaView>
);
}
}
You'll probably need to adjust it a bit to fit whatever screen you're working on, but this got my header just below the icon strip at the top.
Late 2020 answer: For anyone stumbling across this issue themselves, they have added support for this.
Follow this documentation page
You could also create helper component with this style applied right away like this
import React from 'react';
import { StyleSheet, Platform, StatusBar, SafeAreaView } from 'react-native';
export default props => (
<SafeAreaView style={styles.AndroidSafeArea} {...props} >
{props.children}
</SafeAreaView>
);
const styles = StyleSheet.create({
AndroidSafeArea: {
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
}
});
Make note that I also deleted unnecessary styles which breaks natural behavior of SafeAreaView which in my case broke styling.
As for use you simply use it like normal SafeAreaView:
import React from 'react';
import SafeAreaView from "src/Components/SafeAreaView";
render() {
return (
<SafeAreaView>
// Rest of your app
</SafeAreaView>
);
}
}
for more consistency import:
import { Platform, StatusBar } from "react-native";
and then use it like so:
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
if you're seeing this in 2020 and you also need the web support with the Android and iOS, type this in your terminal.
expo install react-native-safe-area-context
this will install the updated safe area context.
Then import the following stuffs into your app.js
import { SafeAreaView, SafeAreaProvider} from "react-native-safe-area-context";
add <SafeAreaProvider> before all the tags in your main function in app.js, also remember to close it at the end.
and finally, instead of view, add SafeAreaView.
Read more at the official expo website : SafeAreaContext
Although the docs says it is relevant only for iOS, when I used React's SafeAreaView it acted differently on different screens on Android.
I managed to fix the problem by implementing my version of SafeAreaView:
import React from "react";
import { Platform, View, StatusBar } from "react-native";
import { GeneralStyle } from "../styles";
export function SaferAreaView({ children }) {
if (Platform.OS == "ios") {
return <SaferAreaView style={{ flex: 1 }}>{children}</SaferAreaView>;
}
if (Platform.OS == "android") {
return <View style={{flex: 1, paddingTop: StatusBar.currentHeight}}>{children}</View>;
}
}
This was tested on an old device (with hardware navigation) and new notch devices (with software navigation) - different screen sizes.
This is currently the best or easiest way to implement SafeAreaView on Android and ios for both vanilla RN and Expo.
import { SafeAreaView } from 'react-native-safe-area-context';
function SomeComponent() {
return (
<SafeAreaView>
<View />
</SafeAreaView>
);
}
1 - expo install expo-constants
2- and do like this for example
import React from "react";
import Constants from "expo-constants";
import { Text, StyleSheet, SafeAreaView, View } from "react-native";
export default function HeaderTabs({ style }) {
return (
<SafeAreaView style={[styles.screen, style]}>
<View style={[styles.view, style]}>
<Text>Hello this is status bar</Text>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
screen: {
paddingTop: Constants.statusBarHeight,
flex: 1,
},
view: {
flex: 1,
},
});
Instead of using Platform API, you can use expo constants.
npm i expo-constants
then import it in your component as
import Constants from "expo-constants"
and then in the styles you can use it like this
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight
} });
To see all the properties of Constants console log it you will find some more useful things.
Well, I had the same problem. I solved this using this lib React Native Status Bar Height, and I recommend because it´s a piece of cake to use.
And if you are using style-components you can add the getStatusBarHeight() on your styles.js like I did on the example below:
import styled from 'styled-components/native';
import { getStatusBarHeight} from 'react-native-status-bar-height';
export const Background = styled.View`
flex:1;
background:#131313;
margin-top: ${getStatusBarHeight()};
`
In the SafeAreaView Docs was told:
It is currently only applicable to iOS devices with iOS version 11 or later.
So now I definitely use it in my project but I use Platform to recognize device platform and for Android, I make a manual safe area for the status bar.
you can use react-native-device-info for device info and apply styling also with a notch
I used StatusBar from react-native instead of expo-status-bar and this worked for me on my OnePlus as well as other Android devices.
import { StatusBar } from 'react-native';
Expo solution(docs - android only):
import { setStatusBarTranslucent } from 'expo-status-bar';
Then in the component you can use useEffect hook:
useEffect(() => {
setStatusBarTranslucent(false)
},[])
for iOS you can use the <SafeAreaView> component from react-native.
ENRICO SECCO was right (i cant comment due to my stackoverflow reputation lol)! any safeareaview thingy doesn't work for me as well, so i get around with
import { getStatusBarHeight} from 'react-native-status-bar-height';
here how execute it, keep in mind that this is in my app.js, where i put all my stack.navigator + bottomtab.navigator
export default function App() {
//IGNORE ALL OF THIS, JUMP TO THE RETURN() FUNCTION!
const [appIsReady, setAppIsReady] = useState(false);
useEffect(() => {
async function prepare() {
try {
await SplashScreen.preventAutoHideAsync();
await Font.loadAsync(AntDesign.font);
await Font.loadAsync({
'Montserrat-Bold': require('./assets/fonts/Montserrat-Bold.ttf'),
'Montserrat-Regular': require('./assets/fonts/Montserrat-Regular.ttf'),
'Montserrat-Light': require('./assets/fonts/Montserrat-Light.ttf'),
});
await new Promise(resolve => setTimeout(resolve, 2000));
} catch (e) {
console.warn(e);
} finally {
// Tell the application to render
setAppIsReady(true);
}
}
prepare();
}, []);
const onLayoutRootView = useCallback(async () => {
if (appIsReady) {
await SplashScreen.hideAsync();
}
}, [appIsReady]);
if (!appIsReady) {
return null;
}
return (
//HERE!
<NavigationContainer>
<View style = {{
flex: 1, <- TO MAKE IT FULL SCREEN (PLEASE DELETE THIS)
marginTop: getStatusBarHeight(), <- TO PUSH IT DOWN FROM OFF SCREEN, MINE RAN OFF TO THE TOP LMAO (PLEASE DELETE THIS)
}} onLayout={onLayoutRootView}>
<Tabs/>
</View>
</NavigationContainer>
);
}
I am going through the react-native tutorials on lynda.com, "React-Native: Building Mobile Apps". The difference lies in the fact that I am using WebStorm to develop JavaScript based apps. I've created the files according to the tutorial:
appContainer.js:
import React, { Component } from "react";
import { Drawer, View } from "react-native";
import { Navigator } from "react-native";
export default class AppContainer extends Component {
constructor(props){
super(props);
this.state = {
store: {},
toggled: false,
theme: null
}
}
toggleDrawer(){
this.state.toggled ? this._drawer.close() : this._drawer.open();
}
openDrawer(){
this.setState({toggled: true});
}
closeDrawer(){
this.setState({toggled: false});
}
renderScene(route, navigator){
switch(route){
default: {
return null
}
}
}
configureScene(route, routeStack){
return Navigator.SceneConfigs.PushFromRight;
}
render(){
return (
<Drawer
ref={(ref) => this._drawer = ref}
type="displace"
content={<View style={{backgroundColor: "#000", height: 1000}}
/>}
onClose={this.closeDrawer.bind(this)}
onOpen={this.openDrawer.bind(this)}
openDrawerOffset={0.2}
>
<Navigator
ref={(ref) => this._navigator = ref}
configureScene={this.configureScene.bind(this)}
renderScene={this.renderScene.bind(this)}
/>
</Drawer>
);
}
}
index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import AppContainer from "./app/appContainer";
export default class dinder extends Component {
render() {
return (
<AppContainer/>
);
}
}
AppRegistry.registerComponent('dinder', () => dinder);
Run/Debug Configuration screen:
However, when I run the app by selecting run 'ios' from the run drop down windows, I am receiving the following error in the emulator window:
Can someone please explain how I can fix this issue within the confines of the code presented for the tutorial that I pasted?
In React-Nav 0.44.3 the Navigator has been deprecated: https://github.com/facebook/react-native/releases/tag/v0.44.3, so is not really a webstorm's configuration's issue.
To fix this, you can follow this Github issue, install the react-native-deprecated-custom-components package through npm or yarn.
And then in your appContainer.js, replace your
import { Navigator } from "react-native";
with
import NavigationExperimental from 'react-native-deprecated-custom-components';
And change all your Navigator call to NavigationExperimenal.Navigator
I want to take an image using react-native image picker,
I am using npm run android command but as the application runs in expo it shows this error:
undefined is not an object(evaluating 'imagepickerManager.showimagepicker')
As I am using expo project index.android.js is not present in the project so react-native run-android command is not working.
Can someone please guide me how to recover this error?
import React, {Component} from 'react';
import {Text, View, TouchableOpacity, Image} from 'react-native';
// var ImagePicker = require('react-native-image-picker');
import * as ImagePicker from 'react-native-image-picker';
// More info on all the options is below in the README...just some common use cases shown here
var options = {
title: 'Select Avatar',
customButtons: [
{name: 'fb', title: 'Choose Photo from Facebook :'},
],
storageOptions: {
skipBackup: true,
path: 'images'
}
};
export default class App extends Component{
constructor(props){
super(props);
this.state={
avatarSource:null
}
}
render(){
let img=this.state.avatarSource == null?null:
<Image
source={this.state.avatarSource}
style={{height:200, width:300}}
/>
return(
<View>
<Text>Welcome to Image Picker</Text>
<TouchableOpacity onPress = {this.show.bind()} >
<Text>Load Images</Text>
</TouchableOpacity>
{img}
</View>
)
}
show(){
ImagePicker.showImagePicker(options, (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button please: ', response.customButton);
}
else {
let source = { uri: response.uri };
// You can also display the image using data:
// let source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({
avatarSource: source
});
}
});
}
}
I was having the same issue. And solved it in following way -
react-native link react-native-image-picker
run the react-native-run-ios and react-native run-android command
More description here
I just fix this error by running react-native link then rebuild your app. It should work as expected. :)
import * as ImagePicker from "react-native-image-picker"