I'm trying to use an AppBar from React Native Material. The icon i use in the IconButton is from react-native-vector-icon. I have no idea why I'm getting error saying Element type is invalid: expect a string. Check the render method for IconButton as I literally copied the exact code from the React Native Material official doc.
import {AppBar, IconButton} from '#react-native-material/core';
import {Icon} from 'react-native-vector-icons/Entypo';
<AppBar
title="Title"
leading={props => (
<IconButton
icon={props => <Icon name="menu" {...props} />}
{...props}
/>
)}
/>
==> Try My Code it works.
import {AppBar, IconButton} from '#react-native-material/core';
import Icon from 'react-native-vector-icons/Entypo';
<AppBar
title="Title"
leading={props => (
<IconButton
icon={props => <Icon name="menu" {...props} />}
{...props}
/>
)}
/>
Related
I have the following 2 screens:
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="SubScreen1" component={SubScreen1} />
I would like to change the screen name of 'SubScreen1' to 'Search Result' but I am getting the error of The action 'NAVIGATE' with payload {"name":"SubScreen1","params":{"paramKey":"Japanese"}} was not handled by any navigator.
How come I am having this error as I have another screen which I just change the name and there is no error.
In my Home Screen:
<View style = {styles.container}>
<Text>Welcome {auth.currentUser?.email}</Text>
<Text></Text>
<Text>What cusine would you like to eat today?</Text>
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
<TouchableOpacity
onPress={() => navigation.navigate("SubScreen1", {paramKey:value})}
style = {styles.button}
>
<Text style = {styles.buttonText}>Search</Text>
</TouchableOpacity>
In my SubScreen1 screen
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
const SubScreen1 = ({route}) => {
const paramKey = route.params.paramKey
console.log(paramKey)
return (
<View>
<Text>{paramKey}</Text>
</View>
)
}
export default SubScreen1
const styles = StyleSheet.create({})
Not sure i understood your question properly but if you want to change the header text of your screen to "Search Result" then just add title property in the Stack.Screen options like below
<Stack.Screen
name="SubScreen1"
component={SubScreen1}
options={{ title: 'Search Result' }}
/>
https://reactnavigation.org/docs/headers/#setting-the-header-title
I am currently making a mobile app and part of it is collecting user data. At the minute I am stuck on getting the DatePicker to show on screen once the text field has been clicked on. I have tried to use the onFocus prop but it does not seem to be working and its not throwing any errors in the console. Here is the code that i have tried using:
const showDatePicker = () => {
return(
<DateTimePicker
value={date}
mode='date'
is24Hour={true}
display="spinner"
onChange={onChange}
/>
)
}
<View style={styles.inputContainer}>
<FontAwesome name="user-circle-o" color={'#808080'} size={20}/>
<TextInput onFocus={() => showDatePicker()} style={styles.input} placeholder="Date Of Birth"
/>
</View>
To give some additional context to the problem I am using a modal which acts as a form for collecting the data. Any help or tips appreciated.
You can wrap the TextInput with a <Pressable />.
<Pressable onPress={() => showDatePicker()}>
<TextInput />
</Pressable>
I need screen to unmount whenever it goes out of focus. I am using a custom drawer and using props unmountOnBlur={true} and options={{unmountOnBlur: true} but its not working. What am i doing wrong or is there another way to accomplish this? I appreciate any help. Here is the relevant code:
<Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />}>
<Drawer.Screen
name='Client Profile'
component={ProfileStackNavigator}
unmountOnBlur={true}
options={{unmountOnBlur: true}}
/>
</Drawer.Navigator>
Here is code on CustomDrawer.js :
<DrawerContentScrollView {...props} >
<DrawerItem
label='Profile'
onPress={() => props.navigation.navigate('Client Profile')}
unmountOnBlur={true}
options={{unmountOnBlur: true}}
/>
</DrawerContentScrollView>
I'm using react-native-community/picker v1.6.1, and I'm trying to make a pre-styled picker item to avoid having the color property on each item. Below is a showcase App.js. The red picker works as expected but the yellow one renders in black instead of yellow and I don't understand why. The code is tested in an iOS emulator with a freshly generated React Native app version 0.62.2 where I've installed the picker component.
import React, {useState} from 'react';
import {SafeAreaView} from 'react-native';
import {Picker} from '#react-native-community/picker';
const YellowPickerItem = props => {
return <Picker.Item {...props} color={'yellow'} />;
};
const App = () => {
const [redValue, setRedValue] = useState(2);
const [yellowValue, setYellowValue] = useState(3);
return (
<>
<SafeAreaView style={{flex: 1}} backgroundColor={'gray'}>
<Picker selectedValue={redValue} onValueChange={setRedValue}>
<Picker.Item label={'Red 1'} value={1} key={1} color={'red'} />
<Picker.Item label={'Red 2'} value={2} key={2} color={'red'} />
<Picker.Item label={'Red 3'} value={3} key={3} color={'red'} />
<Picker.Item label={'Red 4'} value={4} key={4} color={'red'} />
</Picker>
<Picker selectedValue={yellowValue} onValueChange={setYellowValue}>
<YellowPickerItem label={'Yellow 1'} value={1} key={1} />
<YellowPickerItem label={'Yellow 2'} value={2} key={2} />
<YellowPickerItem label={'Yellow 3'} value={3} key={3} />
<YellowPickerItem label={'Yellow 4'} value={4} key={4} />
</Picker>
</SafeAreaView>
</>
);
};
export default App;
The strangest thing is that the code runs just as well if I change the YellowPickerItem component to:
const YellowPickerItem = props => {
return <SafeAreaView />;
};
It feels like I'm missing something basic about react components here, so grateful for a nudge in the right direction.
Markus
You can use itemStyle prop of the picker to styling your picker item.
I want to add a react-native-vector-icon in place of the right button in the header using react native router flux
Here is my code :
<Scene
onRight={() => Actions.inbox()}
rightTitle='Inbox'
key='home'
component={Home}
title='Home'
icon={HomeIcon}
initial
/>
How to add react-native-vector-icon in this?
Instead of "rightTitle" prop you can use:
"rightButtonImage" prop for image
"renderRightButton" prop for custom components.
Described on: https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#scene
I got it, I used renderRightButton for solving it.
here is the example:
const InboxIcon = () => {
return (
<View style={{ marginRight: 10 }} >
<TouchableOpacity onPress={() => Actions.inbox()} >
<Icon
name='comment'
type='font-awesome'
size={30}
/>
</TouchableOpacity>
</View>
);
};
And in scene I render it. Like this,
<Scene
renderRightButton={InboxIcon}
key='home'
component={Home}
title='Home'
icon={HomeIcon}
initial
/>