I would like use DrawerLayoutAndroid module on React-Native app. For use openDrawer programmaticaly, i use useRef hook.
On run this method, my Drawer show only black "overflow", but not the navigation.
If i swip to the right, my Drawler menu will be show :/
My code :
const Layout = ({ children }) => {
let drawler = useRef(null);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
ref={drawler}
renderNavigationView={() => (
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>
I'm in the Drawer!
</Text>
</View>
)}>
<View style={{ flex: 1 }}>
<ScrollView>
<View style={styles.container}>
<Button onPress={() => drawler.current.openDrawer()}> // Show only overflow, not the menu
Open drawler
</Button>
{children}
</View>
</ScrollView>
</View>
</DrawerLayoutAndroid>
);
};
Anyone can help me ?
I solved the issue with useCallback
const [drawer, setDrawer] = useState();
const refDrawer = useCallback(element => {
setDrawer(element);
}, []);
Don't forget set ref={refDrawer} attribute to the DrawerLayoutAndroid component.
Related
I have a FlatList nested in a SectionList as shown below.
There is always 3 sections (rows) and each section has a FlatList with a horizontal scroll.
Expected
On button click, invoking the scrollToEnd() function, to scroll all 3 flatlists from each section to end.
Problem
Only the bottom or last flatlist scrolls to the end.
I cannot figure out why this is - I thought the ref in the flatlist may only be referencing the last Flatlist rendered and not the other two, maybe? If so, any tips or suggestions are welcome. Thank you.
...
const flatlistRef = useRef();
const scrollToEnd = () => {
flatlistRef.current.scrollToEnd({ animating: true });
};
...
<SectionList
contentContainerStyle={styles.sectionListContainer}
stickySectionHeadersEnabled={false}
sections={myData}
renderSectionHeader={({ section }) => (
<>
<FlatList
horizontal
data={section.data}
contentContainerStyle={
styles.flatlistContainer
}
renderItem={({ item }) => (
<Button
onPress={() => updateData(item.id)}
>
<ListItem item={item} />
</Button>
)}
showsHorizontalScrollIndicator={false}
ref={flatlistRef}
/>
</>
)}
renderItem={({}) => {
return null;
}}
/>
I have also working on this but I found a solution where I can create a Section.List by using react-native-paper.
But you can also use the map function, Here is the code of that
import React from "react";
import {View,Text} from "react-native";
const App = () =>{
return(
<View style={{flex: 1}}>
{data.map((item, index) => (
<View key={index} style={{borderBottomColor: 'black', borderBottomWidth: 2}}>
<Text style={{fontSize: 30, fontWeight: 'bold'}}>{item.title}</Text>
{item.items && <>
{item.items.map((item, index) => (
<View key={index} style={{backgroundColor: '#7fc', borderBottomColor: 'blue', borderBottomWidth: 2}}>
<Text style={{fontSize: 20, marginLeft: 40, color: 'blue'}}>{item.title}</Text>
{item.items && <>
{item.items.map((item, index) => (
<View key={index} style={{backgroundColor: 'yellow', borderBottomColor: 'red', borderBottomWidth: 2}}>
<Text style={{fontSize: 16, marginLeft: 80,}}>{item.title}</Text>
</View>
))}
</>}
</View>
))}
</>}
</View>
))}
</View>
)
}
export default App;
I hope It will help.
import React, { Component } from 'react';
import { Alert, Button, TextInput, View, StyleSheet, Text, AsyncStorage } from 'react-native';
import { DrawerItems, DrawerNavigation } from 'react-navigation';
export default class Home extends Component {
const DrawerContent = (props) => (
<View>
<View
style={{
backgroundColor: '#f50057',
height: 140,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ color: 'white', fontSize: 30 }}>
Header
</Text>
</View>
<DrawerItems {...props} />
</View>
)
const Navigation = DrawerNavigator({
// ... your screens
Home:{
screen: HomeScreen,
},
Settings: {
screen: SettingsScreen,
},
}, {
// define customComponent here
contentComponent: DrawerContent,
})
render() {
return (
<View>
<Text>Welcome To Home</Text>
</View>
);
}
}
I am designing a screen which will be a home screen for my app. This screen will have navigation drawer like in Android and the drawer header will contain an image and a text label inside it and below that there will be drawer items from which i will navigate to a different screen. I have tried to achieve this using the above code but it doesn't work. Can you tell me where i am wrong? How can i achieve my target? I am a newbie to react native so i please make my concepts clear
Please replace your DrawerContent with the following code and check if it works.
const DrawerContent = (props) => {
return (
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<View style={{ flexDirection: 'row', paddingBottom: 20 }}>
<View style={{ flex: 80, backgroundColor: '#f50057'}}>
<Image style={{ width: 181, height: 132}} source={images.logo} />
</View>
<Text style={{ color: '#000', fontSize: 30 }}>Header</Text>
</View>
<DrawerItems {...props}/>
</SafeAreaView>
)};
First create Drawer Component
export default class DrawerComponent extends React.Component {
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView>
<View style={{ backgroundColor: "white" }}>
<Image
style={{ margin: 15 }}
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>
</View>
<DrawerItems {...this.props} />
</ScrollView>
</SafeAreaView>
);
}
}
and import the component in your Home.js
import DrawerComponent from "./path/to/drawerComponent";
Please note : ScrollView is necessary for the case when you have more items to show ex: 7+ items (with margins in style prop) and also when screen height is small
I want to create list with radio button using flatlist, but problem is i am able to click on radio button, its not geeting unchecked inside flatlist.
HERE IS MY CODE
<FlatList
data={this.state.addressData}
horizontal={false}
extraData={this.state}
showsHorizontalScrollIndicator={false}
renderItem={({ item, index }) => (
<Card containerStyle={{ backgroundColor: GlobalColors.white, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 10, elevation: 2, padding: 0, borderColor: GlobalColors.white }}>
<View style={{ backgroundColor: GlobalColors.white, padding: 15 }}>
<View style={SelectAddressStyle.horizontalChangeAddress}>
<Radio style={{marginRight : 10}} selected = {true}></Radio>
<Text style={SelectAddressStyle.txtAddressUserName}>{""}</Text>
<Text style={SelectAddressStyle.addressType}>{"HOME"}</Text>
</View>
<Text style={SelectAddressStyle.txtAddress}>
{""}
</Text>
</View>
</Card>
)} />
You have:
<Radio style={{marginRight : 10}} selected = {true}></Radio>
So it can't become unchecked. Maybe try passing in a selected property.
Idk what package you are using for Radio (React native does not have radio by itself) but the problem is that according to this part of your code <Radio style={{marginRight : 10}} selected = {true}></Radio>, you're always passing true to your selected prop, so it won't change in any cases, until you declare a toggle function for it and store its current status in component state. example:
class Example extends component{
state = {
radioStatus: false
}
toggleRadio = () => {
const {radioStatus} = this.state;
this.setState({ radioStatus: !radioStatus})
};
render(){
const {radioStatus} = this.state;
return(
<View>
<Radio selected={radioStatus} onChange={this.toggleRadio} />
</View>
)
}
}
I'm trying to implement a drawer menu in react native and I'm not sure if I'm doing it right. Here is what I have so far:
#App.js
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
Save: SaveScreen,
About: AboutScreen,
},
{
initialRouteName: 'Home',
}
);
#Homescreen.js
static navigationOptions = {
// headerTitle instead of title
drawerLabel: 'Home',
headerTitle:
<View style={{flex: 1, flexDirection: 'row', marginLeft: 16}}>
<TouchableOpacity style={styles.button} onPress={()=>{this.props.navigation.openDrawer()}}>
<Image
source={require('../../assets/ic-hamburger.png')}
style={{ width: 20, height: 18 }}
/>
</TouchableOpacity>
<Text style={styles.menuTitle}>Menu</Text>
</View>
};
How come this.props.navigation is undefined here? How do I retrieve it so that the drawer opens when the image is clicked?
Thanks !
Try this using the navigation object:
static navigationOptions = ({ navigation }) => ({
// headerTitle instead of title
drawerLabel: 'Home',
headerTitle:
<View style={{flex: 1, flexDirection: 'row', marginLeft: 16}}>
<TouchableOpacity style={styles.button} onPress={()=>navigation.navigate('DrawerOpen')}>
....
</TouchableOpacity>
</View>
});
I am using drawer menu and I need to add icons to each of the menu items. How to add icons so that they get displayed before the name of eah activity?
My code -
class SideMenu extends Component {
renderMenu() {
let menuArray = [
{
id:1,
screen: 'HomeDrawer',
title: 'Dashboard',
},
{
id:2,
screen: 'AccountSettings',
title: 'Account Settings',
},
{
id:3,
screen: 'NotificationSettings',
title: 'Notification Settings',
}
]
return menuArray.map((item) => {
return(
<TouchableWithoutFeedback
onPress={this.navigateToScreen(item.screen)} key={item.id}>
<View style={styles.menuItemContainer}>
<View style={{ flex:2 }}>
<Text style={styles.menuText}>{item.title}</Text>
</View>
</View>
</TouchableWithoutFeedback>
)
})
}
render() {
return(
<View style={{ flex:1, backgroundColor:'#FFFFFF' }}>
<ScrollView>
<View style={{ height: '30%', marginBottom: 50}}>
<LinearGradient
start={{ x: 0, y:0 }}
end={{ x: 1, y: 0 }}
colors={['#1865e5', '#159af6']}
style={{height: 200}} >
<View style={{ elevation: 5,}}>
<Image
source={require('../assets/logo.png')}
style={{ height:100, width:100, marginLeft: 10, marginTop: 30, marginBottom: 10 }}
/>
</View>
<View>
{
this.state.userDetails ?
<View>
<Text style={{ fontWeight: "bold", fontSize:15, color: '#FFFFFF', marginLeft: 10 }}>{this.state.userDetails && this.state.userDetails.Details[0].name}</Text>
<Text style={{ fontSize:14, color: '#FFFFFF', marginLeft: 10 }}>{this.state.userDetails && this.state.userDetails.Details[0].email}</Text>
</View>
:
<Text>Loading...</Text>
}
</View>
</LinearGradient>
</View>
{ this.renderMenu() }
<TouchableWithoutFeedback
onPress={ () => {
Alert.alert(
'Logout',
'Are you sure you want to logout?',
[
{text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'Yes', onPress: () => {
AsyncStorage.removeItem('userDetails', () =>
{
});
this.navigateToScreen('Login')();
}},
],
{ cancelable: false }
)
}}>
<View style={styles.menuItemContainer}>
<View style={{ flex:3 }}>
<Text style={styles.menuText}>Logout</Text>
</View>
</View>
</TouchableWithoutFeedback>
</ScrollView>
</View>
)
}
}
})
export default SideMenu
To achieve -
Tried adding icon attribute to each ids and with image but unfortunately it didn't work as expected.
How to add the icons that are in the assets folder so that it can be displayed as per the design that it attached along with this question?
You have to make a customized side bar to add more flexibility to add icons.