Here is my code. I have tried to use the material icon(PhoneInTalk) inside Tooltip's title attribute. But my process seems not working.
Here is my output:
enter image description here
//#material-ui/core/styles
const CustomTooltip = withStyles({
tooltip: {
color: "tomato",
backgroundColor: "black",
fontWeight: "bold",
fontSize: "12px",
},
})(Tooltip);
//JSX
<CustomTooltip
title={`${(<PhoneInTalk />)} Let's talk`}
placement="top-end"
arrow
>
<Avatar className={classes.avatar} src={avatar} alt="Ibrahim Kaiser" />
</CustomTooltip>
Try enclosing the icon and text in a fragment.
<CustomTooltip
title={<><PhoneInTalk /> Let's talk</>}
placement="top-end"
arrow
>
Check this example sandbox link
First of all let me share my code along with the current result of what I have going.
return(
<DismissKeyBoard>
<View>
<Formik
initialValues ={{user: 'User ', place: '', description: '', comments: '',datePosted: new Date(), location: '', eventDate: ''}}
onSubmit ={logInfo}>
{props =>(
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.form}>
<Text style={styles.text}>Pick a place for the event</Text>
<GooglePlacesAutocomplete
placeholder='Insert place to find'
minLength={2}
keyboardAppearance={'light'}
fetchDetails={false}
onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
{props.values.location= data.description}
console.log("hello",props.values.location);
}}
styles={{
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth:0,
width: '100%',
},
textInput: {
fontSize: 16
},
predefinedPlacesDescription: {
color: '#1faadb',
height:'100%',
},
}}
query={{
key: '',
language: 'en', // language of the results
}}
/>
<View style={styles.container}>
<Text
placeholder= {props.values.user}
onChangeText = {props.handleChange('user')}
values = {props.values.user}
style={styles.text}>{props.values.user}</Text>
<TextInput
placeholder= 'Place (e.g Honolulu)'
onChangeText = {props.handleChange('place')}
values = {props.values.place}
style={styles.text}/>
<TextInput
placeholder= 'Description (e.g This is located...)'
onChangeText = {props.handleChange('description')}
values = {props.values.description}
style={styles.text}/>
<TextInput
placeholder= 'Comment (e.g This is fun because...)'
onChangeText = {props.handleChange('comments')}
values = {props.values.comments}
style={styles.text}/>
<Text style={styles.text} >Pick a date for the event</Text>
<DatePicker
date={props.values.eventDate}
onDateChange={(date) => {props.values.eventDate= date}}
values = {props.values.eventDate} />
{/* <Text style={styles.text}>Location</Text> */}
<View style={styles.viewbtn}>
<TouchableOpacity onPress={props.handleSubmit} style={styles.btn} ><Text style={styles.txtbtn} >Submit</Text></TouchableOpacity>
{/* <Button title="Submit" onPress={props.handleSubmit} /> */}
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
)}
</Formik>
</View>
</DismissKeyBoard>
)
}
const styles = StyleSheet.create({
container:{
// flex:1,
paddingTop:20,
// margin: 10,
alignItems: 'center'
},
// form:{
// alignItems: 'flex-start',
// paddingTop:40,
// },
text:{
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: 'black',
paddingTop:15,
},
viewbtn:{
paddingTop:15,
},
btn:{
backgroundColor: 'purple',
padding:20,
margin:20,
width: 100,
justifyContent: 'center',
alignItems: 'center',
borderRadius : 5,
},
txtbtn:{
fontWeight: 'bold',
fontSize: 14,
color: 'orange'
},
})
The issue
When I click on the GooglePlacesAutoComplete I am able to see the list of places, but then when I click on any of the found places it will not take the input.
Observations
When the <GooglePlacesAutocomplete /> is NOT inside a ScrollView I cannot see the suggestion.
When the <GooglePlacesAutocomplete /> is NOT within any other <View></View> it works perfectly fine.
Warning
With the above code I also get this warning message "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead."
Desired Result
I would like to have the <GooglePlacesAutocomplete /> component displayed on top of the form, without any weird errors and its functionalities working properly. (Preferably as shown in the picture)
Edit
I am importing import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'; from https://github.com/FaridSafi/react-native-google-places-autocomplete
I am not an expert in GUI, an explanation would be very appreciated and welcomed. If additional information is required I would be more than happy to provide it.
Thank you in advance.
So I faced the same problem and the one thing that helped me solve the problem was adding
keyboardShouldPersistTaps={true} inside the <ScrollView> as a prop.
This is my code snippet.
<ScrollView keyboardShouldPersistTaps={true}>
<SelectionDD studentstatus={studentStatus}/>
<SearchableDD collegeNames={collegeNames} placeholder='University'/>
</ScrollView>
I developing a react native project.
I use react-native-custom-picker but when I try gives a Custom Picker style it's not working. my code like this below
//.. in CustomPicker.js
<CustomPicker
placeholder={labelDefault}
options={options}
getLabel={item => item.label}
optionTemplate={this.renderOption}
selectedValue={this.props.selectedValue}
onValueChange={this.onValueChangeCustomPicker}
textStyle={{color:colors.dark_black,fontSize:25}}--> Here is not work
/>
renderOption() function like this
renderOption(settings) {
const { item, getLabel } = settings
return (
<View style={styles.optionContainer}>
<View style={styles.innerContainer}>
<Text style={{ color: colors.dark_black, alignSelf: 'flex-start', fontSize: 24 }} key={item.key}>{item.label}</Text>
</View>
</View>
)
}
I know Picker style only support IOS.
What's my fault? Any idea!
can you try this code?
I don't know how you organized "options," but you can't work because you don't have any place to take the factors for "colors."
renderOptions:
const options = [
...
color: "black",
]
...
renderOption(settings) {
const { item, getLabel } = settings
return (
<View style={styles.optionContainer}>
<View style={styles.innerContainer}>
<Text style={{ color: item.color, alignSelf: 'flex-start', fontSize: 25 }} key={item.key}>{item.label}</Text>
</View>
</View>
)
}
<CustomPicker
placeholder={labelDefault}
options={options}
getLabel={item => item.label}
optionTemplate={this.renderOption}
selectedValue={this.props.selectedValue}
onValueChange={this.onValueChangeCustomPicker}
/>
I checked source code and documentation if I wanna give style placeholder I should use props for field template like this.
<CustomPicker
fieldTemplateProps={{textStyle:{color:"red",fontSize:22}}}
placeholder={'Please select your favorite item...'}
options={options}
getLabel={item => item.label}
optionTemplate={this.renderOption}
headerTemplate={this.renderHeader}
onValueChange={value => {
Alert.alert('Selected Item', value ? JSON.stringify(value) : 'No item were selected!')
}}
/>
it's worked in my project
more detail
Sorry for my bad English. I have built a navigation bar without using Tab Navigation from React Navigation, everything works fine except when I try to set an 'active' icon, I have handled it with states but the state restarts when I navigate to another window and render the bar again navigation.
I think I have complicated it a bit, but I need to capture the active screen to pass it as status and change the color of the icon to 'active' and the others disabled. I have tried with Detect active screen and onDidFocus but I only received information about the transition, I require the name or id of the screen.
I leave my code (this component is exported to each page where I wish to have the navigation bar). Please, the idea is to not use Tab Navigation from React Native Navigation.
export default class Navbar extends Component {
/** Navigation functions by clicking on the icon (image) */
_onPressHome() {
this.props.navigation.navigate('Main');
}
_onPressSearch() {
this.props.navigation.navigate('Main');
}
render() {
const { height, width } = Dimensions.get('window');
return (
<View style={{ flexDirection: 'row', height: height * .1, justifyContent: 'space-between', padding: height * .02 }}>
/** Icon section go Home screen */
<View style={{ height: height * .06, alignItems: 'center' }}>
<TouchableOpacity
onPress={() => this._onPressHome()}
style={styles.iconStyle}>
<Image
source={HOME_ICON}
style={{ width: height * .04, height: height * .04, }} />
<Text style={[styles.footerText, { color: this.state.colorA }]}>Inicio</Text>
</TouchableOpacity>
</View>
/** Icon section go Search screen */
<View style={{ height: height * .06, alignItems: 'center' }} >
<TouchableOpacity
onPress={() => this._onPressSearch()}
style={styles.iconStyle}>
<Image
source={SEARCH_ICON}
style={{ width: height * .04, height: height * .04, opacity: .6 }} />
<Text style={[styles.footerText, { color: this.state.colorB }]}>Inicio</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
For the navigation I used createStackNavigator and also
const drawerNavigatorConfig = {
contentComponent: props => <CustomDrawerContentComponent {...props}
/>,
};
const AppDrawer = createDrawerNavigator(drawerRouteConfig,
drawerNavigatorConfig);
I do not know if createDrawerNavigator is interfering with something, I read that it generates additional keys. Please help me with this.
import { useIsFocused } from '#react-navigation/native';
function Profile() {
const isFocused = useIsFocused();
return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}
check documentation
https://reactnavigation.org/docs/use-is-focused/
You can use this inViewPort library for checking the view port of the user. This is how you can user the library
render(){
<InViewPort onChange={(isVisible) => this.checkVisible(isVisible)}>
<View style={{flex: 1, height: 200, backgroundColor: 'blue'}}>
<Text style={{color: 'white'}}>View is visible? {this.state.visible </Text>
</View>
</InViewPort>
}
Import_this
import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';
This my React Button code But style not working Hare ...
<Button
onPress={this.onPress.bind(this)}
title={"Go Back"}
style={{color: 'red', marginTop: 10, padding: 10}}
/>
Also I was try by this code
<Button
containerStyle={{padding:10, height:45, overflow:'hidden',
borderRadius:4, backgroundColor: 'white'}}
style={{fontSize: 20, color: 'green'}}
onPress={this.onPress.bind(this)} title={"Go Back"}
> Press me!
</Button>
Update Question:
Also I was try by This way..
<Button
onPress={this.onPress.bind(this)}
title={"Go Back"}
style={styles.buttonStyle}
>ku ka</Button>
Style
const styles = StyleSheet.create({
buttonStyle: {
color: 'red',
marginTop: 20,
padding: 20,
backgroundColor: 'green'
}
});
But No out put:
Screenshot of my phone:-
The React Native Button is very limited in what you can do, see; Button
It does not have a style prop, and you don't set text the "web-way" like <Button>txt</Button> but via the title property <Button title="txt" />
If you want to have more control over the appearance you should use one of the TouchableXXXX' components like TouchableOpacity
They are really easy to use :-)
I had an issue with margin and padding with a Button. I added Button inside a View component and apply your properties to the View.
<View style={{margin:10}}>
<Button
title="Decrypt Data"
color="orange"
accessibilityLabel="Tap to Decrypt Data"
onPress={() => {
Alert.alert('You tapped the Decrypt button!');
}}
/>
</View>
React Native buttons are very limited in the option they provide.You can use TouchableHighlight or TouchableOpacity by styling these element and wrapping your buttons with it like this
<TouchableHighlight
style ={{
height: 40,
width:160,
borderRadius:10,
backgroundColor : "yellow",
marginLeft :50,
marginRight:50,
marginTop :20
}}>
<Button onPress={this._onPressButton}
title="SAVE"
accessibilityLabel="Learn more about this button"
/>
</TouchableHighlight>
You can also use react library for customised button .One nice library is react-native-button (https://www.npmjs.com/package/react-native-button)
If you do not want to create your own button component, a quick and dirty solution is to wrap the button in a view, which allows you to at least apply layout styling.
For example this would create a row of buttons:
<View style={{flexDirection: 'row'}}>
<View style={{flex:1 , marginRight:10}} >
<Button title="Save" onPress={() => {}}></Button>
</View>
<View style={{flex:1}} >
<Button title="Cancel" onPress={() => {}}></Button>
</View>
</View>
Instead of using button . you can use Text in react native and then make in touchable
<TouchableOpacity onPress={this._onPressButton}>
<Text style = {'your custome style'}>
button name
</Text>
</TouchableOpacity >
Style in button will not work, You have to give style to the view.
<View style={styles.styleLoginBtn}>
<Button
color="orange" //button color
onPress={this.onPressButton}
title="Login"
/>
</View>
Give this style to view
const styles = StyleSheet.create({
styleLoginBtn: {
marginTop: 30,
marginLeft: 50,
marginRight: 50,
borderWidth: 2,
borderRadius: 20,
borderColor: "black", //button background/border color
overflow: "hidden",
marginBottom: 10,
},
});
Only learning myself, but wrapping in a View may allow you to add styles around the button.
const Stack = StackNavigator({
Home: {
screen: HomeView,
navigationOptions: {
title: 'Home View'
}
},
CoolView: {
screen: CoolView,
navigationOptions: ({navigation}) => ({
title: 'Cool View',
headerRight: (<View style={{marginRight: 16}}><Button
title="Cool"
onPress={() => alert('cool')}
/></View>
)
})
}
})
Try This one
<TouchableOpacity onPress={() => this._onPressAppoimentButton()} style={styles.Btn}>
<Button title="Order Online" style={styles.Btn} > </Button>
</TouchableOpacity>
You can use Pressable with Text instead of button.
import { StyleSheet, Text, View, Pressable } from 'react-native';
<Pressable style={styles.button} onPress = {() => console.log("button pressed")}>
<Text style={styles.text}>Press me</Text>
</Pressable>
Example Style:
const styles = StyleSheet.create({
button: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 4,
elevation: 3,
backgroundColor: 'red'
},
text: {
fontSize: 16,
lineHeight: 21,
fontWeight: 'bold',
letterSpacing: 0.25,
color: 'white',
},
});
We can use buttonStyle prop now.
https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle
React-native button is very limited, it won't allow styling. use react native elements button or create custom button
button styles does'nt work in react-native, to style your button in react-native easy way is to put it inside the View block like this:
<View
style={styles.buttonStyle}>
<Button
title={"Sign Up"}
color={"#F31801"}/>
</View>
style.buttonStyle be like this:
style.buttonStyle{
marginTop:30,
marginLeft:50,
marginRight:50,
borderWidth:2,
borderRadius:20,
borderColor:'#F31801',
overflow:"hidden",
marginBottom:10,
}
, it will make you able to use designs with buttons
As the answer by #plaul mentions TouchableOpacity, here is an example of how you can use that;
<TouchableOpacity
style={someStyles}
onPress={doSomething}
>
<Text>Press Here</Text>
</TouchableOpacity>
SUGGESTION:
I will recommend using react-native-paper components as they are modified and can be modified much more than react-native components.
To install;
npm install react-native-paper
Then you can simply import them and use.
More details here Here
Wrap the button component inside a view component and change the styles of the view component, it should work. Please refer to the snippet below
<View style={{width: 150, alignSelf: 'center'}}>
<Button onPress={demoFunction} title="clickMe!!" />
</View>
I know this is necro-posting, but I found a real easy way to just add the margin-top and margin-bottom to the button itself without having to build anything else.
When you create the styles, whether inline or by creating an object to pass, you can do this:
var buttonStyle = {
marginTop: "1px",
marginBottom: "1px"
}
It seems that adding the quotes around the value makes it work. I don't know if this is because it's a later version of React versus what was posted two years ago, but I know that it works now.