Hi i am trying to create a react native with expo app the main app's function is call users in an automatic way but we are not able to request PHONE_CALL permission using expo! what is the best way to call any Android permission?
The app is only Android but we don´t know how to request this permission!
Thanks for your help!
You can use Linking.openURL for this:
Linking.openURL('tel:123456789');
Here is an example of it in action: https://snack.expo.io/#notbrent/ashamed-churros
import * as React from 'react';
import { Linking, Text, View } from 'react-native';
export default function App() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text
onPress={() => {
Linking.openURL('tel:50000000');
}}>
Call some phone
</Text>
</View>
);
}
Related
I want to render multiple element with different styles but View and child View is not working as div working in html. please guide or share some resources to learn how multiple View work in a return.
import React from 'react'
import { Button, StyleSheet, Text, View,ScrollView } from 'react-native';
export default function Home() {
return (
<View>
<View style={styles.container}>
<Text >
Books are the best Mentors
</Text>
</View>
<View>
<Text style={{backgroundColor:'red'}} >
Books are the best Mentors
</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
container2: {
flex: 1,
backgroundColor: '#fff',
position:'absolute',
bottom:0
},
});
TL;DR <div> is not the same as <View>
It looks like the possible issue here is that <div> have different default styling, and you should always remember about this. For example the default value for flexDirection in RN is column, not row like we have with <div>s.
Even though the official RN documentation about View tells us this:
View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.
We should always keep in mind the specifics of the particular platform we work with.
I would also recommend you to check out this tutorial regarding Flex styling in React Native to get better experience working with it.
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',
},
});
I'm developing a react native app with redux as a state management and trying the following implementation:
Fetching data from Server (Firebase) before rendering the app. I have a loading screen, which is working fine, but i cant dispatch my function in it for fetching the data from server and write directly to the current state. I dont see that the state is changed, but when I saving the code (as it is) again the state is updated as I expected. So i think my code is fetching the data after the first rendering is done.
I cant figure out the the problem. Cause i put my code for dispatching in the "useeffect" hook as i should or not?
import React, {useEffect} from 'react';
import {ActivityIndicator, View} from 'react-native';
import {Images, useTheme} from '#config';
import {Image, Text} from '#components';
import styles from './styles';
import {ApplicationActions} from '#actions';
import { store } from '/Users/user1/KitaList/app/store/index.js'
export default function Loading({navigation}) {
const {colors} = useTheme();
const onProcess = () => {
setTimeout(() => {
navigation.replace('Main');
}, 2500);
};
useEffect(() => {
store.dispatch(ApplicationActions.ongetKitadata()); //Executing dispatchting getting data
onProcess();
}, []);
return (
<View style={styles.container}>
<View style={{alignItems: 'center'}}>
<Image source={Images.logo} style={styles.logo} resizeMode="contain" />
<Text title1 style={{marginTop: 10}}>
MyApp
</Text>
<Text headline primaryColor style={{marginTop: 10}}>
MyApp DIRECTORY
</Text>
</View>
<ActivityIndicator
size="large"
color={colors.text}
style={{
position: 'absolute',
top: 260,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
alignItems: 'center',
}}
/>
</View>
);
}
I am trying to use React Native components in the web by making use of React Native web Library.
But when doing that my DOM elements has lots of inline styles which makes it look cluttered , how can we get rid of the redundant styles as part of the transpilation .
Some thing like this
And can we even get rid of this transplied inline css.
This is how my React Native component used here looks like
import React from "react";
import { View, Text, Platform, StyleSheet } from "react-native";
const instructions = Platform.select({
ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
android:
"Double tap R on your keyboard to reload,\n" +
"Shake or press menu button for dev menu",
web: "Your browser will automatically refresh as soon as you save the file."
});
const HomeScreen = () => {
return (
<View >
<Text>
Welcome to React Native Web universal app!
</Text>
<Text>
This component is shared between web and react environment. To see how
it works, just edit the HomeScreen.js
</Text>
<Text>{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
}
});*/
export default HomeScreen;
After updating the RNW to 0.11.4 the DOM appears to be more cleaner and leaner but dosent eliminate them.
eg
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.