Im using react-native 0.62.0 with react-navigation version ^4.3.7 and createMaterialBottomTabNavigator. I have tried searching and implementing their solutions but none of it seems to work. I want to center the text in my header. This is what I tried.
static navigationOptions = ({ navigation }) => ({
title: 'Profile',
headerTitleStyle: { flex: 1, textAlign: 'center', color: 'white', fontSize: 20, alignSelf: 'center' , },
headerTintColor: 'white',
headerStyle: {
backgroundColor: '#4169E1',
},
})
Try with this:
static navigationOptions = ({ navigation }) => ({
title: 'Profile',
headerTitleStyle: { flex: 1, textAlign: 'center', color: 'white', fontSize: 20, alignSelf: 'center' , },
headerTintColor: 'white',
headerStyle: {
backgroundColor: '#4169E1',
},
headerTitleAlign: 'center',
})
Try after removing alignSelf: 'center' ,. The below code is working for me.
defaultNavigationOptions: ({ navigation }) => {
return {
headerStyle: {
backgroundColor: '#1e89f4'
},
headerTitle: 'Statistics',
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
textAlign: 'center',
flex: 1
},
headerLeft: (
<View style={{ paddingLeft: 13 }}>
<FontAwesomeIcon
size={25}
color='#fff'
icon={faBars}
onPress={() => navigation.openDrawer()}
/>
</View>
),
headerRight: <View />
};
}
Related
I am updating some state with useState() in my react native component. Once I have that state set I want to save the details to the server, so I have set that up in an useEffect() hook. To be clear, the setting of the state IS working, and I see the value print to the screen.
However, what I'm noticing is, even though I've set note as a dependency in the dependency array of the useEffect() hook, the function never fires when the state updates. What am I missing here?
const [note, setNote] = useState('');
const dispatch = useDispatch();
useEffect(() => {
if (note) {
console.log('updating note...');
dispatch(updateNote(props.client.id, note));
}
}, [note]);
FYI, I am updating the state inside a TextInput, like so (I had to use onBlur to avoid the issue of react loosing focus on the first character type because I am passing a component within screenOptions of a TabNavigator):
<TextInput
key='note'
style={{
color: '#fff',
fontSize: 16,
width: '100%',
textAlign: 'center',
}}
placeholder='Tap here to share something...'
placeholderTextColor={styles.colors.textPlaceholder}
maxLength={50}
onBlur={(text) => setNote(text)}
defaultValue={note || props?.client?.note?.value}
/>
As I mentioned, this has been a tricky situation because I had to get around react's loss of focus when I rely on onChangeText() or onChange(). I am passing in a CustomHeader - which is a function inside the parent, to a TabNavigator within screenOptions like so:
screenOptions={{
headerShown: true,
headerStyle: {
backgroundColor: Colors.primary,
elevation: 0,
shadowOpacity: 0,
shadowColor: 'transparent',
height: 170,
},
key: 'patient-tab',
headerShadowVisible: false,
tabBarStyle: { backgroundColor: Colors.primary },
headerTintColor: Colors.light,
headerTitle: (props) => <CustomHeader {...props} />, // Passed in here
tabBarActiveTintColor: Colors.light,
tabBarInactiveTintColor: Colors.lightInactive,
tabBarActiveBackgroundColor: Colors.primary,
tabBarInactiveBackgroundColor: Colors.primary,
}}
The full code looks like this:
export const ClientBottomTabNavigator = (props) => {
const [note, setNote] = useState('');
const dispatch = useDispatch();
useEffect(() => {
if (props.client.id && note) {
console.log('updating note...');
dispatch(updateNote(props.client.id, note));
}
}, [props.client.id, note]);
const CustomHeader = () => {
return (
<View>
<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 }}>
<Feather
name='chevron-left'
size={24}
onPress={() => props.navigation.goBack()}
color={styles.colors.textInverse}
style={{ justifySelf: 'flex-start', alignSelf: 'flex-start', width: '32%', marginBottom: 6 }}
/>
<Text
style={{
color: '#fff',
fontSize: 18,
alignSelf: 'center',
justifySelf: 'center',
fontWeight: 'bold',
}}
>
{props?.client?.firstName} {props?.client?.lastName}
</Text>
<Feather
name='' // Leave this blank
style={{ justifySelf: 'flex-end', alignSelf: 'flex-end', width: '32%' }}
/>
</View>
<View style={{ alignItems: 'center', marginBottom: 6 }}>
<Text style={{ color: '#fff', fontSize: 18, marginBottom: 6 }}>
{convertDiscipline(props?.client?.discipline)}
</Text>
<View>
<TextInput
key='note'
style={{
color: '#fff',
fontSize: 16,
width: '100%',
textAlign: 'center',
}}
placeholder='Tap here to share something…’
placeholderTextColor={styles.colors.textPlaceholder}
maxLength={50}
onBlur={(text) => setNote(text)}
defaultValue={note || props?.client?.note?.value}
/>
</View>
</View>
</View>
);
};
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator
screenOptions={{
headerShown: true,
headerStyle: {
backgroundColor: Colors.primary,
elevation: 0,
shadowOpacity: 0,
shadowColor: 'transparent',
height: 170,
},
key: 'client-tab',
headerShadowVisible: false,
tabBarStyle: { backgroundColor: Colors.primary },
headerTintColor: Colors.light,
headerTitle: (props) => <CustomHeader {...props} />, // Passed in here
tabBarActiveTintColor: Colors.light,
tabBarInactiveTintColor: Colors.lightInactive,
tabBarActiveBackgroundColor: Colors.primary,
tabBarInactiveBackgroundColor: Colors.primary,
}}
initialRouteName={'Visits'}
>
<Tab.Screen
name='Visits'
component={VisitsTab}
options={{
tabBarLabel: 'VISITS',
tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
}}
/>
<Tab.Screen
name='Chart'
component={ChartTab}
options={{
tabBarLabel: 'CHARTS',
tabBarIcon: ({ color, size }) => <FontAwesome name='id-badge' color={color} size={size} />,
}}
/>
<Tab.Screen
name='Goals'
component={GoalsTab}
options={{
tabBarLabel: 'EDIT GOALS',
tabBarIcon: ({ color, size }) => <FontAwesome name='trophy' color={color} size={size} />,
}}
/>
</Tab.Navigator>
);
};
See here https://playcode.io/1106437, it works, but you have onBlur, you need to blur to trigger the action, maybe you need to use onChangeText insted.
I have a custom DrawerContent component and I am unable to navigate to a screen from it using navigator.navigate('DrawerHelp').
I am still getting this error and I really have no idea how to fix it.
I am trying to navigate from the Help button to its own component called DrawerHelp.
issue The action 'NAVIGATE' with payload {"name":"DrawerHelp"} was not handled by any navigator
This is my code below.
function DrawerComponent() {
return (
<Drawer.Navigator
drawerContentOptions={{activeBackgroundColor: '#efefef', activeTintColor: '#000000'}}
initialRouteName="Tabs"
drawerStyle={{ backgroundColor:'#ffffff', width:'85%', paddingBottom: 50 }}
drawerContent={
props => ( <CustomDrawerContent {...props} /> )
}>
<Drawer.Screen name="Dashboard" component={Tabs} options={{
drawerIcon: config => <Ionicons name={'ios-home'} size={18} color={'#444'} headerTitle="AAA" />,
}} />
<Drawer.Screen name="Help" component={DrawerHelp}
options={{
drawerIcon: config => <Ionicons name={'ios-people-circle-outline'} size={18} color={'#444'}/>,
}}
/>
</Drawer.Navigator>
);
}
export function CustomDrawerContent (props) {
const [ tabs, setTabs ] = useState([
{
name: 'Help',
icon: 'ios-call',
borderColor: '#e7c53f',
backgroundColor: '#fff',
color: '#e7c53f',
fontWeight: '500'
},{
name: 'Share',
icon: 'ios-megaphone',
borderColor: '#e7c53f',
backgroundColor: '#fff',
color: '#e7c53f',
fontWeight: '500'
},{
name: 'Logout',
icon: 'ios-log-out',
borderColor: '#e7c53f',
backgroundColor: '#fff',
color: '#e7c53f',
fontWeight: '500'
}
]);
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<View style={{ padding: 15 }}>
<View style={{
flexDirection: 'row',
justifyContent: 'space-between',
height: 50,
alignItems: 'center'
}}>
{
tabs.map((tab) => {
return (
<TouchableOpacity
key={tab.name}
style={{
height: '100%',
flex: .32,
alignItems: 'center',
borderWidth: .5,
borderColor: tab.borderColor,
backgroundColor: tab.backgroundColor,
borderRadius: 10,
flexDirection: 'row',
justifyContent: 'space-evenly'
}}
onPress={() => {
if(tab.name == 'Logout') {
// navigation.toggleDrawer();
}
if(tab.name == 'Share') {
// onShare();
}
if(tab.name == 'Help') {
props.navigation.navigate('DrawerHelp');
}
}}>
<Ionicons name={tab.icon} size={18} style={{ color: tab.color }} />
<Text style={{ color: tab.color, fontWeight: tab.fontWeight }}>{trans(tab.name, cntx.lang)}</Text>
</TouchableOpacity>
)
})
}
</View>
</View>
</DrawerContentScrollView>
);
}
It is not working because you have defined DrawerComponent with name 'Help'
<Drawer.Screen name="Help" component={DrawerHelp}
options={{drawerIcon: config => <Ionicons name={'ios-people-circle-outline'} size={18} color={'#444'}/>
if(tab.name == 'Help') {
props.navigation.navigate('DrawerHelp'); <== Change here to Help not DrawerHelp
}
I am using below code to show a menu on react native. I need to show a submenu but I cannot figure out how.
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#cee1f2',
color: '#cee1f2',
itemStyle: {marginVertical: 5, color: 'white'},
labelStyle: {
color: '#d8d8d8',
},
}}
screenOptions={{headerShown: false}}
drawerContent={CustomSidebarMenu}>
<Drawer.Screen
name="homeScreenStack"
options={{drawerLabel: 'Home Screen'}}
component={homeScreenStack}
/>
<Drawer.Screen
name="settingScreenStack"
options={{drawerLabel: 'Setting Screen'}}
component={settingScreenStack}
/>
</Drawer.Navigator>
Here is Customesidebar code.
// Import React and Component
import React from 'react';
import {View, Text, Alert, StyleSheet} from 'react-native';
import {
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '#react-navigation/drawer';
import AsyncStorage from '#react-native-community/async-storage';
const CustomSidebarMenu = (props) => {
return (
<View style={stylesSidebar.sideMenuContainer}>
<View style={stylesSidebar.profileHeader}>
<View style={stylesSidebar.profileHeaderPicCircle}>
<Text style={{fontSize: 25, color: '#307ecc'}}>
{'DishUp'.charAt(0)}
</Text>
</View>
<Text style={stylesSidebar.profileHeaderText}>
DishUp
</Text>
</View>
<View style={stylesSidebar.profileHeaderLine} />
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem
label={({color}) =>
<Text style={{color: '#d8d8d8'}}>
Logout
</Text>
}
onPress={() => {
props.navigation.toggleDrawer();
Alert.alert(
'Logout',
'Are you sure? You want to logout?',
[
{
text: 'Cancel',
onPress: () => {
return null;
},
},
{
text: 'Confirm',
onPress: () => {
AsyncStorage.clear();
props.navigation.replace('Auth');
},
},
],
{cancelable: false},
);
}}
/>
</DrawerContentScrollView>
</View>
);
};
export default CustomSidebarMenu;
const stylesSidebar = StyleSheet.create({
sideMenuContainer: {
width: '100%',
height: '100%',
backgroundColor: '#307ecc',
paddingTop: 40,
color: 'white',
},
profileHeader: {
flexDirection: 'row',
backgroundColor: '#307ecc',
padding: 15,
textAlign: 'center',
},
profileHeaderPicCircle: {
width: 60,
height: 60,
borderRadius: 60 / 2,
color: 'white',
backgroundColor: '#ffffff',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
},
profileHeaderText: {
color: 'white',
alignSelf: 'center',
paddingHorizontal: 10,
fontWeight: 'bold',
},
profileHeaderLine: {
height: 1,
marginHorizontal: 20,
backgroundColor: '#e2e2e2',
marginTop: 15,
},
});
Here is what it looks like right now. But I want to add a submenu inside Home and Screen. How can I achieve this?
I follow a tutorial for creating a sliding tab or segment component using animation like below:
const SlidingTabBar = (props) => {
const [active, setActive] = useState(0)
const [xTabOne, setXTabOne] = useState(0)
const [xTabTwo, setXTabTwo] = useState(0)
const [transX, setTransX] = useState(new Animated.Value(0))
const handleSlide = (type) => {
Animated.spring(transX, {
toValue: type,
duration: 100
}).start()
}
return (
<View style={styles.screen}>
<View style={styles.tabContainer}>
<Animated.View style={styles.active, {transform: [{ translateX: transX}]}} />
<TouchableOpacity onLayout={(e) => setXTabOne(e.nativeEvent.layout.x)} onPress={() => setActive(0), handleSlide(xTabOne)}><Text>tab one</Text></TouchableOpacity>
<TouchableOpacity onLayout={(e) => setXTabTwo(e.nativeEvent.layout.x)} onPress={() => setActive(1), handleSlide(xTabTwo)}><Text>tab 2</Text></TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
tabContainer: {
flexDirection: 'row',
borderWidth: 1,
borderColor: 'blue',
width: 300,
justifyContent: 'space-around',
position: 'relative',
},
active: {
position: 'absolute',
backgroundColor: 'lightblue',
width: '50%',
height: '100%',
left: 0,
top: 0
}
})
but when I implement my transform on the View component my overlay disappear and break like this:
any suggestions?
This is very simple in starting I was also struggling in this but I sort it out
Note: code is for functional component
just do it take a View as button container and inside it take to button like this
<View style={styles.tabGroup}>
<TouchableOpacity
activeOpacity={0.6}
underlayColor="#0000ff"
onPress={()=> handleTab("tab1")}
style={[styles.tabButton, tab.tab1 && styles.tabButtonActive]}
>
<Text style={[styles.tabButtonTitle, tab.tab1 && styles.tabButtonTitleActive]}>Tab btn1</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.6}
underlayColor="#0000ff"
onPress={()=> handleTab("tab2")}
tyle={[styles.tabButton, tab.tab2 && styles.tabButtonActive]}
>
<Text style={[styles.tabButtonTitle, tab.tab2 && styles.tabButtonTitleActive]}>Tab btn2</Text>
</TouchableOpacity>
</View>
Add some styles to button and button group
tabGroup:{
flexDirection: 'row',
justifyContent: 'center',
backgroundColor: 'rgba(11, 93, 30, 0.11)',
borderRadius: 46,
marginHorizontal: 20,
justifyContent: 'space-between'
},
tabButton:{
backgroundColor: 'transparent',
borderRadius: 46,
paddingHorizontal: 20,
paddingVertical: 12,
alignItems: 'center',
},
tabButtonActive:{
backgroundColor: '#0B5D1E',
borderRadius: 46,
paddingHorizontal: 20,
paddingVertical: 12,
alignItems: 'center',
},
tabButtonTitle:{
fontSize: 16,
fontWeight: 'normal',
textAlign: 'center',
color: '#000'
},
tabButtonTitleActive:{
fontSize: 16,
fontWeight: 'normal',
textAlign: 'center',
color: '#fff'
}
Then define function and state on the top of
const [tab, setTab] = useState({
tab1: false,
tab2: true
});
const handleTab = (swap) =>{
if(swap==="tab1"){
setTab({
tab1: true,
tab2: false
})
}
else{
setTab({
tab1: false,
tab2: true
})
}
}
I have a flatlist component that is 2 rows but the columns don't distribute properly. I'm having trouble styling it to achieve this.
My Flatlist:
<FlatList
contentContainerStyle={styles.list}
numColumns={2}
data={this.props.route.params.data}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => (
<TouchableOpacity
style={styles.view}
onPress={() =>
item.subcategories
? this.props.navigation.navigate('Browse', {
screen: 'Subcategories',
params: {data: item.subcategories},
})
: this.props.navigation.navigate('Browse', {
screen: 'Products',
params: {id: item.id},
})
}
underlayColor="grey">
<View style={styles.view}>
<Text style={styles.title}>{item.title}</Text>
</View>
</TouchableOpacity>
)}
/>
Style:
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
list: {
flexDirection: 'column',
},
view: {
backgroundColor: 'grey',
alignItems: 'center',
justifyContent: 'center',
alignContent: 'stretch',
margin: 1,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 2,
},
title: {
textAlign: 'center',
fontSize: 20,
padding: 5,
width: '100%',
},
});
What it looks like:
I know I can set the width to a number, but I want it to dynamically change with screen size.
Can you try add width: '50%' to the view style or width: Dimensions.get('window').width / 2