Develop Reference

How do I program a button to open react navigation drawer in react native?

I am a noob at React Native and I am confused on how to program a floating button to open the react-native navigation drawer.
As of right now I am calling the button in MapScreen.js. The button is called FloatingButton.js.
I have running into the error of "ReferenceError: Can't Find variable: navigation" when I press the button.
A bit of preface, I have been using burger menus on headers to open the drawer menu.
App.js
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { StyleSheet, View, Image } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import useCachedResources from './hooks/useCachedResources';
//import BottomTabNavigator from './navigation/BottomTabNavigator';
//import LinkingConfiguration from './navigation/LinkingConfiguration';
import HomeScreen from './screens/HomeScreen';
import MapScreen from './screens/MapScreen';
import LinksScreen from './screens/LinksScreen';
//import FloatingButton from './components/FloatingButton';
const HomeStack = createStackNavigator();
const LinksStack = createStackNavigator();
const Drawer = createDrawerNavigator();
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#2a2a2a'
},
headerTintColor: '#fff'
}}>
<HomeStack.Screen name="Drive" component={HomeScreen} options={{
headerLeft: () => (
<Icon.Button name="ios-menu" size={25}
backgroundColor = "#2a2a2a" onPress={()=> navigation.openDrawer()}></Icon.Button>
)
}} />
</HomeStack.Navigator>
);
const LinkStackScreen = ({navigation}) => (
<LinksStack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#2a2a2a'
},
headerTintColor: '#fff'
}}>
<LinksStack.Screen name="Links" component={LinksScreen} options={{
headerLeft: () => (
<Icon.Button name="ios-menu" size={25}
backgroundColor = "#2a2a2a" onPress={()=> navigation.openDrawer()}></Icon.Button>
)
}} />
</LinksStack.Navigator>
);
export default function App(props) {
const isLoadingComplete = useCachedResources();
if (!isLoadingComplete) {
return null;
} else {
return (
<View style={styles.container}>
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeStackScreen} />
<Drawer.Screen name="Drive" component={MapScreen} />
<Drawer.Screen name="Links" component={LinkStackScreen} />
</Drawer.Navigator>
</NavigationContainer>
<StatusBar style="auto" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#242C40',
}
});
MapScreen.js
import React, {useState} from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import Maps from '../components/GoogleMaps';
import FloatingButton from '../components/FloatingButton';
export default class MapScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Maps
style={ styles.map }
/>
<FloatingButton style= {{bottom: 645, right: 380}} /> {/* broken button */}
</View>
);
}
}
function DevelopmentModeNotice() {
if (__DEV__) {
const learnMoreButton = (
<Text onPress={handleLearnMorePress} style={styles.helpLinkText}>
Learn more
</Text>
);
return (
<Text style={styles.developmentModeText}>
Development mode is enabled {learnMoreButton}
</Text>
);
} else {
return (
<Text style={styles.developmentModeText}>
You are not in development mode:
</Text>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#4B4B4B',
},
developmentModeText: {
marginBottom: 20,
color: '#BCBCBC',
fontSize: 14,
lineHeight: 19,
textAlign: 'center',
},
contentContainer: {
paddingTop: 30,
},
welcomeContainer: {
alignItems: 'center',
marginTop: 10,
marginBottom: 20,
},
welcomeImage: {
width: 100,
height: 80,
resizeMode: 'contain',
marginTop: 3,
marginLeft: -10,
},
getStartedContainer: {
alignItems: 'center',
marginHorizontal: 50,
},
homeScreenFilename: {
marginVertical: 7,
},
codeHighlightText: {
color: 'rgba(96,100,109, 0.8)',
},
codeHighlightContainer: {
backgroundColor: 'rgba(0,0,0,0.5)',
borderRadius: 3,
paddingHorizontal: 4,
},
getStartedText: {
fontSize: 17,
color: '#E2E2E2',
lineHeight: 24,
textAlign: 'center',
},
tabBarInfoContainer: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
...Platform.select({
ios: {
shadowColor: 'black',
shadowOffset: { width: 0, height: -3 },
shadowOpacity: 0.1,
shadowRadius: 3,
},
android: {
elevation: 20,
},
}),
alignItems: 'center',
backgroundColor: '#5F5F5F',
paddingVertical: 20,
},
tabBarInfoText: {
fontSize: 17,
color: '#E2E2E2',
textAlign: 'center',
},
navigationFilename: {
marginTop: 5,
},
helpContainer: {
marginTop: 15,
alignItems: 'center',
},
helpLink: {
paddingVertical: 15,
},
helpLinkText: {
fontSize: 14,
color: '#2e78b7',
},
map: {
height: '100%',
width: '100%',
}
});
FloatingButton.js I think this is where the problem lies, I think I am calling navigation wrong or
onPress={()=> navigation.openDrawer()} wrong.
import * as React from 'react';
import { StyleSheet, View, Text, Animated, TouchableWithoutFeedback } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
const Drawer = createDrawerNavigator();
export default class FloatingButton extends React.Component ({navigation}) {
render() {
return (
<View style={[styles.container, this.props.style]}>
<TouchableWithoutFeedback onPress={()=> navigation.openDrawer()}>
<Animated.View style={[styles.button, styles.menu]}>
<Icon name="ios-menu" size={25} color = "#fff" />
</Animated.View>
</TouchableWithoutFeedback>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: "center",
position: "absolute"
},
button: {
position:"absolute",
width: 45,
height: 45,
borderRadius: 60/2,
alignItems: "center",
justifyContent: "center",
shadowRadius: 10,
shadowColor: "#2a2a2a",
shadowOpacity: 0.3,
shadowOffset: {height: 10}
},
menu:{
backgroundColor:"#2a2a2a",
}
});
Here's what the MapScreen looks like
The error I get when I press the button
Drawer menu
Home screen

First option
In the map you can pass the navigation reference in a props like:
<FloatingButton
style= {{bottom: 645, right: 380}}
navigation={this.props.navigation}/>
then in your button component you can get the reference via the props and do:
this.props.navigation.openDrawer()
Second option
you can pass a callback to you component like:
<FloatingButton
style= {{bottom: 645, right: 380}}
isPressed={() => this.props.navigation.openDrawer()}/>
and call you callback like this in the button component
<TouchableWithoutFeedback onPress={()=> this.props.isPressed()}>

if your button is not in navigation stack, so you have not navigation as props then useNavigation is a good solution for you :
import { useNavigation } from '#react-navigation/native';
in your component:
const navigation = useNavigation();
then :
<TouchableOpacity onPress={() => navigation.openDrawer()}>
// your icon
</TouchableOpacity>

React Native screen cut off at top Android

I have an input that is cutt off at the top. Is it possible to have it aligned directly under the black bar without writing specific margins/padding for it? If I take off the padding the element completely dissapears from the screen
import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions } from 'react-native';
export default function IndoorFOrm() {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<View style={styles.container}>
<TextInput
style={styles.button}
onChangeText={text => onChangeText(text)}
value={value}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 35,
backgroundColor: '#ecf0f1',
},
button:{
borderRadius: 4,
borderWidth: 2,
width: 100,
height: 40,
borderColor: 'red',
backgroundColor: "rgb(72, 120, 166)",
}
});

SafeAreaView does not work on Android, I generally do this.
import React from 'react';
import { Platform, StyleSheet } from 'react-native';
const styles = new StyleSheet.create({
screenPadding: {
paddingTop: Platform.OS === 'android' ? 25 : 0,
}
});

Try using StatusBar.currentHeight which gives the Status Bar height in Android.
import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions, StatusBar } from 'react-native';
export default function IndoorFOrm() {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<View style={styles.container}>
<TextInput
style={styles.button}
onChangeText={text => onChangeText(text)}
value={value}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
height: StatusBar.currentHeight,
backgroundColor: '#ecf0f1',
},
button:{
borderRadius: 4,
borderWidth: 2,
width: 100,
height: 40,
borderColor: 'red',
backgroundColor: "rgb(72, 120, 166)",
}
});

Using SafeAreaView
import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
export default function IndoorFOrm() {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<View style={styles.container}>
<SafeAreaView>
<TextInput
style={[styles.button, {paddingTop: insets.top}]}
onChangeText={text => onChangeText(text)}
value={value}
/>
</SafeAreaView>
</View>
);
}
Link: https://github.com/react-native-community/react-native-safe-area-view

add 'react-native-safe-area-context' to your project and then
import {SafeAreaView} from 'react-native-safe-area-context'
now use this particular <SafeAreaView></SafeAreaView> to wrap your view should work perfectly on iOS and android

I can not move the text

Text is not moving, I tried to use justifyContent, alignItems and textAlign but not working. Working on visual studio and react-native, using my phone to emulator.
you can see the code ^^
I hope that u can help me
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
Image,
Picker,
ImageBackground
} from 'react-native';
export default class App extends Component {
render() {
return (
<ImageBackground
source={require('./resim.jpg')}
style={styles.container}>
<View styles={styles.overlayContainer}>
<View styles={styles.top}>
<Text style={styles.header}>FIRST</Text>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
height: '100%',
},
overlayContainer: {
flex: 1,
backgroundColor: 'rgba(47,163,218, .4)',
},
top: {
height: '50%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white'
},
header: {
color: '#fff',
fontSize: 28
}
});
Please help me guys please.

overlayContainer: { flex: 1,backgroundColor:'rgba(47,163,218, .4)' },
top: { height: '50%', alignItems: 'center',justifyContent: 'center',backgroundColor: 'white' },
header: { color: '#fff', fontSize: 28 }
Try:
Add width size for top style and overlayContainer style

Android Application Emulator keeps stopping on React Native

I was editing one of the '.js' files and after saving my work after some changes, when I typed 'rr' to refresh application on the emulator, I kept getting this message.
Android Application Emulator keeps stopping
App info
Close app
enter image description here
After creating Form.js and under a components folder in my project in the visual studio code editor and importing it in my Login.js that's where the error started to occur. IDK what I did wrong. I'm new to React Native and am just learning.
Form.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
export default class Login extends Component<{}> {
render(){
return(
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Email"
placeholderTextColor = "#ffffff"
/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Password"
placeholderTextColor = "#ffffff"
/>
</View>
)
}
}
const styles = StyleSheet.create({
container : {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
inputBox: {
width:300,
backgroundColor:'rgba(255,255,255,0.3)',
borderRadius: 25,
paddingHorizontal: 16,
fontSize: 16,
color:'#ffffff',
marginVertical: '10'
}
});
Login.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
StatusBar
} from 'react-native';
import Logo from '../components/Logo';
import Form from '../components/Form';
export default class Login extends Component<{}> {
render () {
return(
<View style={styles.container}>
<Logo/>
<Form/>
</View>
)
}
}
const styles = StyleSheet.create({
container : {
backgroundColor: '#29b6f6',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});

Here is your solution
Your application is crashed because of this props underlineColorAndroid="rgba(0,0,0,0)" in your TextInput and also minor change in inputBox style remove string value marginVertical: "10" to marginVertical: 10
Form.js
import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
export default class Login extends Component {
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.inputBox}
// underlineColorAndroid="rgba(0,0,0,0)"<---Comment this code---
placeholder="Email"
placeholderTextColor="#ffffff"
/>
<TextInput
style={styles.inputBox}
// underlineColorAndroid="rgba(0,0,0,0)"<---Comment this code---
placeholder="Password"
placeholderTextColor="#ffffff"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
inputBox: {
width: 300,
backgroundColor: "rgba(255,255,255,0.3)",
borderRadius: 25,
paddingHorizontal: 16,
fontSize: 16,
color: "#ffffff",
marginVertical: 10 <-----Remove string to number---
}
});
Output:--

fontFamily 'Arial' is not a system font using react-native-textinput-effects

I have a error when I using react-native-textinput-effects .
This is my error message:
fontFamily 'Arial' is not a system font and has not been loaded
through Expo.Font.loadAsync.
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38
in diffProperties
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Expo.Font.loadAsync.
node_modules\expo\src\Font.js:34:10 in processFontFamily
node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38
in diffProperties
... 30 more stack frames from framework internals
This is my code:
import React, { Component } from 'react'
import { StyleSheet, View, Text, TextInput, Image, TouchableOpacity } from 'react-native'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Font } from "expo";
import { Fumi} from 'react-native-textinput-effects';
class Login extends React.Component {
render() {
return (
<View style={styles.main_container}>
<View style={styles.subview_container}>
<View style={[styles.card2, { backgroundColor: '#a9ceca' }]}>
<Text style={styles.title}>Fumi</Text>
<Fumi
label={'Course Name'}
labelStyle={{ color: '#a3a3a3' }}
inputStyle={{ color: '#f95a25' }}
iconClass={FontAwesomeIcon}
iconName={'university'}
iconColor={'#f95a25'}
iconSize={15}
/>
<Fumi
style={styles.input}
label={'Degree'}
iconClass={FontAwesomeIcon}
iconName={'graduation-cap'}
iconColor={'#77116a'}
/>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#555500',
},
subview_container: {
},
card2: {
padding: 16,
},
input: {
marginTop: 4,
},
title: {
paddingBottom: 16,
textAlign: 'center',
color: '#404d5b',
fontSize: 20,
fontWeight: 'bold',
opacity: 0.8,
}
})
export default Login
I tried to load the Arial font using this code but without success :
componentDidMount() {
Font.loadAsync({
'Arial': require('./assets/fonts/Arial.ttf'),
});
}
Can you help me?

check this, it is work correctly code for app.js, just adapt for your case
import React from "react";
import { AppLoading, Font } from "expo";
import { StyleSheet, Text, View } from "react-native";
export default class App extends React.Component {
state = {
loaded: false,
};
componentWillMount() {
this._loadAssetsAsync();
}
_loadAssetsAsync = async () => {
await Font.loadAsync({
diplomata: require("./assets/fonts/DiplomataSC-Regular.ttf"),
});
this.setState({ loaded: true });
};
render() {
if (!this.state.loaded) {
return <AppLoading />;
}
return (
<View style={styles.container}>
<Text style={styles.info}>
Look, you can load this font! Now the question is, should you use it?
Probably not. But you can load any font.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
padding: 30,
},
info: {
fontFamily: "diplomata",
textAlign: "center",
fontSize: 14,
},
});