React Native Can't focus in TextInput - react-native

class Main extends Component {
constructor(props) {
super(props)
this.state = {
id: '',
password: '',
}
console.log('yes')
this._handleTextChange = this._handleTextChange.bind(this)
}
_handleTextChange(id, text) {
console.log(text)
var newState = Object.assign({}, this.state);
var newState = Object.assign({}, this.state);
newState[id] = text
this.setState(newState)
}
render() {
console.log('ass')
return (
<View style={MainStyle.justFlexOne}>
<View style={MainStyle.coverImageWrapper}>
<Image source={require('../assets/images/cursive.jpg')} style={MainStyle.coverImage}/>
</View>
<View style={MainStyle.mainBackground}>
<TouchableHighlight>
<Text style={MainStyle.bigFontDefault}>
Comma
</Text>
</TouchableHighlight>
<TextInput
style={MainStyle.TextInputs}
value={this.state.id}
editable={true}
onChangeText={(text) => {console.log('asdf');this.setState({id:text})}}
placeholder='text'
/>
</View>
</View>
)
}
}
const MainStyle = StyleSheet.create({
justFlexOne: {
flex: 1,
},
mainBackground: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
},
bigFontDefault: {
color: '#fafafa',
fontSize: 60,
textShadowOffset: {width: 0, height: 1},
textShadowRadius: 8,
textShadowColor: 'rgba(21,42,55,0.4)',
fontFamily: 'Optima-Italic',
fontWeight: '500',
},
coverImageWrapper: {
position: 'absolute',
top: 0, left: 0, bottom: 0, right: 0,
},
coverImage: {
flex: 1,
width: null,
height: null,
resizeMode: 'cover',
},
textInputs: {
height: 40,
width: 200,
color: '#fcc439',
backgroundColor: 'rgba(0,0,0,0.4)',
borderColor: '#fcc439',
}
})
Problem is, I can't focus into TextInput on iOS Simulator operated by XCode(Version 8.2.1).(it means I can't type some characters in input.) I have done what I can handle (like click, enter etc...) using mac keyboard, trackpad even apple mouse. In despite of Connect hardware Keyboard is turned on.
Also StyleSheet doesn't work on TextInput as well.(it works well on other component.)
How can I fix this problem??

change
style={MainStyle.TextInputs}
to
style={MainStyle.textInputs}

Related

Type Error : Method.bind is not a function

I am new to React Native. I try to create pie chart using 'react-native-pathjs-charts' library, but I got an error mentioning method.bind is not a function.
Here is my code:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Animated, Easing, TouchableOpacity, Image, Linking} from 'react-native';
import { Bar } from 'react-native-pathjs-charts'
import { Pie } from 'react-native-pathjs-charts'
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {
};
export default class App extends Component<Props> {
constructor(){
super()
this.state = {
Default_Rating: 2,
Max_Rating : 5,
}
this.Star = 'https://aboutreact.com/wp-content/uploads/2018/08/star_filled.png';
this.Star_With_Border = 'https://aboutreact.com/wp-content/uploads/2018/08/star_corner.png';
this.animatedValue = new Animated.Value(0)
}
UpdateRating( key )
{
this.setState({ Default_Rating: key });
}
componentDidMount(){
this.animate()
}
animate(){
this.animatedValue.setValue(0)
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 2000,
easing: Easing.linear
}
).start(() => this.animate())
}
render() {
let data = [{
"name": "Washington",
"population": 7694980
}, {
"name": "Oregon",
"population": 2584160
}, {
"name": "Minnesota",
"population": 6590667,
"color": {'r':223,'g':154,'b':20}
}, {
"name": "Alaska",
"population": 7284698
}]
let options = {
margin: {
top: 20,
left: 20,
right: 20,
bottom: 20
},
width: 350,
height: 350,
color: '#2980B9',
r: 50,
R: 150,
legendPosition: 'topLeft',
animate: {
type: 'oneByOne',
duration: 200,
fillTransition: 3
},
label: {
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
color: '#ECF0F1'
}
}
let React_Native_Rating_Bar = [];
for( var i = 1; i <= this.state.Max_Rating; i++ )
{
React_Native_Rating_Bar.push(
<TouchableOpacity
activeOpacity = { 0.7 }
key = { i }
onPress = { this.UpdateRating.bind( this, i ) }>
<Image
style = { styles.StarImage }
source = { ( i <= this.state.Default_Rating ) ? { uri: this.Star } : { uri: this.Star_With_Border } } />
</TouchableOpacity>
);
}
const marginLeft = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 150]
})
return (
<View style={styles.container}>
<View>
<Text style={styles.title}>Merchant Dashboard</Text>
</View>
<View style = { styles.childView }>
{
React_Native_Rating_Bar
}
</View>
<Text style = { styles.textStyle1 }>
Rating for your shop :
{ this.state.Default_Rating } / { this.state.Max_Rating }
</Text>
<View style={styles.box}>
<Animated.Text
style={{
marginLeft,
color: 'green'}} >
Possitive Reviews!
</Animated.Text>
<Animated.Text
style={{
marginLeft,
color: 'red'
}}>
Negative Reviews!
</Animated.Text>
<View style={styles.btnStyle}>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={{
uri:
'https://image.flaticon.com/icons/png/512/8/8816.png',
}}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={{
uri:
'https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_play_circle_outline_48px-512.png',
}}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={{
uri:
'https://image.flaticon.com/icons/png/512/56/56616.png',
}}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
</View>
</View>
<View style={styles.container1}>
<Pie data={data}
options={options}
accessorKey="population"
margin={{top: 20, left: 20, right: 20, bottom: 20}}
color="#2980B9"
pallete={
[
{'r':25,'g':99,'b':201},
{'r':24,'g':175,'b':35},
{'r':190,'g':31,'b':69},
{'r':100,'g':36,'b':199},
{'r':214,'g':207,'b':32},
{'r':198,'g':84,'b':45}
]
}
r={50}
R={150}
legendPosition="topLeft"
label={{
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
color: '#ECF0F1'
}}
/>
</View>
<View>
<Text style={styles.LinkStyle} onPress={ ()=> Linking.openURL('https://google.com') } >Click Here To view Suggetions for improvement of the shop.</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
container1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
},
childView:{
justifyContent: 'center',
flexDirection: 'row',
},
StarImage:{
width: 40,
height: 40,
resizeMode: 'cover'
},
textStyle1:
{
textAlign: 'center',
color: '#000',
marginTop: 15
},
title:{
fontSize: 23,
color: '#000'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
box: {
marginTop: 10,
height:80,
width: 300,
backgroundColor: '#b2beb5',
},
btnStyle:{
justifyContent: 'center',
flexDirection: 'row',
},
btn2Style:{
alignItems: 'flex-end'
},
ImageIconStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
},
TextStyle: {
color: '#fff',
marginBottom: 4,
marginRight: 20,
},
SeparatorLine: {
backgroundColor: '#fff',
width: 1,
height: 40,
},
LinkStyle: {
color: '#E91E63',
textDecorationLine: 'underline'
},
});
In my case the error was due to react-native-d3multiline-chart which occured after upgrading react-native version from 0.54.6 to 0.59.1 because internally react-native-d3multiline-chart was using react-native-svg.
I solved this error by forking this repository and changing the react-native-svg version to 9.3.3 in package.json of react-native-d3multiline-chart.
Pointing to this updated commit id in my project package.json for react-native-d3multiline-chart solved this error for me.
I think you need to use arrow function. Like this,
onPress={() => this.UpdateRating.bind(this, i)}
If this not working, pls share your error log to understand error clearly.
I'm running into this exact issue (after a RN upgrade, 0.57.8 -> 0.59.1) and am almost certain is it because the react-native-pathjs-charts library is no longer maintained, and is pointing at an old / wrong version of react-native-svg.
While I haven't solved it yet (will update), my suspicion is that updating react-native-svg & updating the package.json of react-native-pathjs-charts to not explicitly use v~5.5.1 will get us in the right direction.
UPDATE: I was able to fix it (temporarily, will need to fork the charts repo) by manually updating the module's package.json to point at my own local react-native-svg module:
"dependencies": {
"lodash": "^4.12.0",
"paths-js": "^0.4.5"
},
"peerDependencies": {
"react-native-svg": "9.3.3"
},
Just make sure you're properly adding react-native-svg to your project.

How to add clickable rightButtons under topBar React Native Navigation?

I have integrated React Native navigation package. I want to add badge with the dynamic value on my topBar rightButton.
Github link of the package:: https://github.com/wix/react-native-navigation
I want an output like this. You can check this screenshot::
Issue::
If I am adding a count value on notification icon then there is no event occurs when I am trying to click on button. On click of this button I want to open up my notification screen.
Code:
static options({ menuIcon }) {
return {
topBar: {
title: {
fontFamily: font,
fontSize: fontSize.heading,
color: colors.white,
alignment: 'center',
text: strings.dashboard
},
alignment: 'center',
elevation: 0,
noBorder: true,
background: {
color: colors.dark
},
leftButtons: [
{
id: 'openSideMenu',
icon: menuIcon ? menuIcon : APIURLServiceSingleton.getInstance()._menuIcon
}
],
rightButtons: [
{
id: 'notificationButton',
component: {
name: 'component.notificationButton'
}
}
]
}
}
}
Code for my custom component::
<TouchableOpacity
onPress={() => this.openSystemAlerts()}
style={{ position: 'absolute', right: 0, bottom: -13 }}
>
<View style={styles.button}>
<View style={[posRelative]}>
<Icon
name="notifications-none"
size={27}
color={colors.white}
/>
{(unseen_count && unseen_count > 0) &&
<Text style={styles.badge}>{unseen_count}</Text>
}
</View>
</View>
</TouchableOpacity>
Environment
React Native Navigation version: 2.12.0
React Native version: 0.58
Platform(s) : IOS only(on version 10.0)
It seems that, position:'absolute' is creating problem,
Either ,
add zIndex:2 ...here, number must be greater than any other zIndex in its parent or if there is not any zIndex used then any number>0 is fine.
or
remove position:'absolute' and try styling without it.
try this component; worked fine for me
https://github.com/RajenderDandyal/smart-city-Mobile-App/blob/master/src/UI/TopBarCartCount/index.js
`
class TopBarCartCount extends Component {
handleCartPress = () => {
if (!this.props.isAuthenticated) {
NavigateUser(2, componentIds.myAccountStack, screenNames.signIn)
} else {
NavigateUser(2, componentIds.myAccountStack, screenNames.myCart)
}
};
render() {
return (
<View style={styles.containerWrapper}>
<TouchableOpacity onPress={this.handleCartPress}>
<View style={styles.container}>
{cartPlus}
<View style={styles.badge}>
<Text style={styles.countText}>
{this.props.cart.length}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
);
}
}
let mapStateToProps = (state) => {
return {
cart: state.auth.user.cart ? state.auth.user.cart : [],
isAuthenticated: state.auth.isAuthenticated
}
}
export default connect(mapStateToProps)(TopBarCartCount);
const styles = StyleSheet.create({
containerWrapper: {
flex: 1,
height: 40,
width: 50,
justifyContent: 'center',
paddingTop: 15,
paddingRight: 5,
alignItems: 'center'
},
container: {
flex: 1,
height: 40,
width: 50,
paddingLeft: 5,
flexDirection: 'row',
alignItems: 'flex-start'
},
badge: {
backgroundColor: themeConstants.danger,
width: 15,
height: 15,
alignItems: 'center',
justifyContent: 'center',
paddingLeft: 0,
paddingTop: 1,
paddingBottom: 2,
marginLeft: 0,
borderRadius: 10
},
countText: {
fontSize: 10,
paddingLeft: 0,
color: themeConstants.offWhite
}
});`

Show a custom pop-up alert overlay on-top of header - React Navigation

I'm trying to show this custom modal pop-up over the top of the Header component in React Navigation. See the pic below:
I've tried setting zIndexes on the overlay and parent view containers, but the header is seperate in the component stack. Anyone know how to solve this? I've tried putting a BlurView over the header component.
import React, { Component } from "react";
import PropTypes from "prop-types";
import { StyleSheet, View, Animated, Text, TextInput } from "react-native";
import BlockButton from "../common/BlockButton";
import { BlurView } from "react-native-blur";
export default class BlurAlert extends Component {
static navigationOptions = ({ navigation }) => {
return {
headerStyle: {}
};
};
constructor(props) {
super(props);
this.state = {
visible: this.props.visible,
title: null,
body: null
};
}
render() {
if (this.props.visible) {
return (
<View style={styles.wrapper}>
<BlurView style={styles.blurView} blurType="dark" blurAmount={5} />
<View style={styles.box}>
<Text style={styles.titleText}>{this.props.title}</Text>
<Text style={styles.bodyText}>{this.props.body}</Text>
{this.props.children}
<BlockButton
backgroundColor={"#F0AC8F"}
borderColor={"#F0AC8F"}
fontColor={"white"}
title={this.props.buttonText}
padding={23}
marginTop={25}
disabled={false}
onPress={this.props.onClosed}
/>
</View>
</View>
);
} else {
return <View />;
}
}
}
BlurAlert.propTypes = {
title: String,
body: String,
buttonText: String,
visible: Boolean
};
BlurAlert.defaultProps = {
visible: false,
buttonText: "OK"
};
const styles = StyleSheet.create({
wrapper: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
height: "100%",
width: "100%",
zIndex: 9999
},
blurView: {
flex: 1,
zIndex: 99999
},
container: {
margin: 25,
zIndex: 99999,
position: "relative",
top: 0,
left: 0,
bottom: 0,
right: 0
},
box: {
backgroundColor: "white",
padding: 20,
position: "absolute",
top: "15%",
borderColor: "black",
borderWidth: StyleSheet.hairlineWidth,
margin: 25,
alignItems: "center",
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1,
shadowRadius: 3,
zIndex: 99999,
width: "85%"
},
titleText: {
fontFamily: "Lora",
fontSize: 20
},
bodyText: {
marginTop: 15,
textAlign: "center",
fontFamily: "Lora",
fontSize: 16,
lineHeight: 20
}
});
You can try using "Modal":
import React, { Component } from "react";
import PropTypes from "prop-types";
import { StyleSheet, View, Animated, Text, TextInput, Modal } from "react-native";
import BlockButton from "../common/BlockButton";
import { BlurView } from "react-native-blur";
export default class BlurAlert extends Component {
static navigationOptions = ({ navigation }) => {
return {
headerStyle: {}
};
};
constructor(props) {
super(props);
this.state = {
visible: this.props.visible,
title: null,
body: null
};
}
render() {
if (this.props.visible) {
return (
<Modal
transparent
animationType="fade"
visible={this.state.visible}
onRequestClose={() => {
console.log('Modal has been closed.');
}}>
>
<View style={styles.wrapper}>
<BlurView style={styles.blurView} blurType="dark" blurAmount={5} />
<View style={styles.box}>
<Text style={styles.titleText}>{this.props.title}</Text>
<Text style={styles.bodyText}>{this.props.body}</Text>
{this.props.children}
<BlockButton
backgroundColor={"#F0AC8F"}
borderColor={"#F0AC8F"}
fontColor={"white"}
title={this.props.buttonText}
padding={23}
marginTop={25}
disabled={false}
onPress={this.props.onClosed}
/>
</View>
</View>
</Modal>
);
} else {
return <View />;
}
}
}
BlurAlert.propTypes = {
title: String,
body: String,
buttonText: String,
visible: Boolean
};
BlurAlert.defaultProps = {
visible: false,
buttonText: "OK"
};
const styles = StyleSheet.create({
wrapper: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
height: "100%",
width: "100%",
zIndex: 9999
},
blurView: {
flex: 1,
zIndex: 99999
},
container: {
margin: 25,
zIndex: 99999,
position: "relative",
top: 0,
left: 0,
bottom: 0,
right: 0
},
box: {
backgroundColor: "white",
padding: 20,
position: "absolute",
top: "15%",
borderColor: "black",
borderWidth: StyleSheet.hairlineWidth,
margin: 25,
alignItems: "center",
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1,
shadowRadius: 3,
zIndex: 99999,
width: "85%"
},
titleText: {
fontFamily: "Lora",
fontSize: 20
},
bodyText: {
marginTop: 15,
textAlign: "center",
fontFamily: "Lora",
fontSize: 16,
lineHeight: 20
}
});

React Native Button in ScrollView positioning

I have another problem with a button. I have to position it inside a ListView under the last item.
Here are the classes I used:
Notes.js:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
export default class Note extends Component {
render() {
return (
<View key={this.props.keyval} style={styles.note}>
<Text style={styles.noteText}>{this.props.val.date}</Text>
<Text style={styles.noteText}>{this.props.val.note}</Text>
<TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>
<Text style={styles.noteDeleteText}>Del</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
note: {
position: 'relative',
padding: 20,
paddingRight: 100,
borderBottomWidth:2,
borderBottomColor: '#ededed'
},
noteText: {
paddingLeft: 20,
borderLeftWidth: 10,
borderLeftColor: '#0000FF'
},
noteDelete: {
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2980b9',
padding: 10,
top: 10,
bottom: 10,
right: 10
},
noteDeleteText: {
color: 'white'
}
});
This is the component that I use every time when I want to create a note.
Main.js:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
ScrollView,
TouchableOpacity,
AsyncStorage,
} from 'react-native';
import Note from './Note';
export default class Main extends Component {
constructor(props){
super(props);
this.state = {
noteArray: [],
noteText: '',
};
this.getSavedNotes(this.state.noteArray);
}
render() {
let notes = this.state.noteArray.map((val, key)=>{
return <Note key={key} keyval={key} val={val}
deleteMethod={()=>this.deleteNote(key)}/>
});
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>- NOTER -</Text>
</View>
<ScrollView style={styles.scrollContainer}>
{notes}
<TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</ScrollView>
<View style={styles.footer}>
<TextInput
style={styles.textInput}
placeholder='Write your note here'
onChangeText={(noteText)=> this.setState({noteText})}
value={this.state.noteText}
placeholderTextColor='white'
underlineColorAndroid='transparent'>
</TextInput>
</View>
</View>
);
}
addNote(){
if(this.state.noteText){
var d = new Date();
this.state.noteArray.push({
'date':d.getFullYear()+
"/"+(d.getMonth()+1) +
"/"+ d.getDate(),
'note': this.state.noteText
});
this.setState({ noteArray: this.state.noteArray });
this.setState({noteText:''});
AsyncStorage.setItem('arr', JSON.stringify(this.state.noteArray));
alert(this.state.noteArray);
}
}
deleteNote(key){
this.state.noteArray.splice(key, 1);
this.setState({noteArray: this.state.noteArray});
}
getSavedNotes = async (noteArray) =>{
try{
let data = await AsyncStorage.getItem('arr');
if(JSON.parse(data))
{
this.state.noteArray = JSON.parse(data);v
}
}catch(error){
alert(error);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
backgroundColor: '#1A237E',
alignItems: 'center',
justifyContent:'center',
borderBottomWidth: 10,
borderBottomColor: '#ddd'
},
headerText: {
color: 'white',
fontSize: 18,
padding: 26
},
scrollContainer: {
flex: 1,
marginBottom: 100
},
footer: {
position: 'absolute',
bottom: 0,
backgroundColor: '#000000',
left: 0,
right: 70,
zIndex: 10
},
textInput: {
alignSelf: 'stretch',
color: '#fff',
padding: 20,
backgroundColor: '#252525',
borderTopWidth:2,
borderTopColor: '#ededed'
},
addButton: {
position: 'absolute',
zIndex: 11,
right: 0,
bottom: 0,
backgroundColor: '#1A237E',
width: 70,
height: 68,
// borderRadius: 35,
alignItems: 'center',
justifyContent: 'center',
elevation: 8
},
addButtonText: {
color: '#fff',
fontSize: 24
}
});
Here is where I save the notes and display them inside the ListView. After the insertion, the button should appear under the new added note.
Finally the App.js:
import React, { Component } from 'react';
import Main from './app/components/Main.js';
export default class App extends Component {
render() {
return (
<Main/>
);
}
}
Here I just display the Main.js component.
I made it! Here are the changes I made in Main.js file:
<ScrollView style={styles.scrollViewContainer}>
<ScrollView style={styles.scrollContainer}>
{notes}
</ScrollView>
<TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</ScrollView>
And here is the designSheet:
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
backgroundColor: '#1A237E',
alignItems: 'center',
justifyContent:'center',
borderBottomWidth: 10,
borderBottomColor: '#ddd',
},
headerText: {
color: 'white',
fontSize: 18,
padding: 26
},
scrollContainer: {
flex: 1,
},
footer: {
position: 'absolute',
bottom: 0,
height: 70,
backgroundColor: '#000000',
left: 0,
right:0,
zIndex: 10,
},
textInput: {
alignSelf: 'stretch',
color: '#fff',
padding: 20,
backgroundColor: '#252525',
borderTopWidth:2,
borderTopColor: '#ededed',
marginRight: 70,
},
addButton: {
position: 'relative',
zIndex: 11,
left: 0,
top: 0,
backgroundColor: '#1A237E',
width: 70,
height: 70,
alignItems: 'center',
justifyContent: 'center',
elevation: 8
},
addButtonText: {
color: '#fff',
fontSize: 60
},
scrollViewContainer: {
flex: 1,
marginBottom: 70,
}
});
I hope this help others aswell

react native alignself not working with position absolute

I am trying to create a small tooltip in react native. For the most part it works. But want to use alignself, to auto size the view that contains text. It works with position relative, but that pushes the content away. Position absolute puts all the text inside the tooltip below each other and the tooltip is very narrow.
I have seen some modules for react native tooltip, but those use actions, and I just need to use text.
Anybody an idea on how to get this working?
The is what I have:
constructor(props) {
super(props);
this.state = {
visible: false,
};
}
toggleStatus() {
this.setState({visible: true});
setTimeout(() => {
this.setState({visible: false});
}, 3000);
}
toolTip = () => {
return (
<View style={styles.containerMain}>
{renderIf(this.state.visible,
<View style={styles.tooltipWrapper}>
<Text style={styles.tooltipStyle}>{this.props.tooltipText}</Text>
</View>
)}
<View style={styles.questionMarkWrapper}>
<TouchableOpacity disabled={this.state.visible} onPress={()=>this.toggleStatus()}>
<Text style={styles.questionMark}>?</Text>
</TouchableOpacity>
</View>
</View>
)
}
render() {
return (
<View style={styles.containerStyle}>
{this.toolTip()}
</View>
)
}
And styling I use:
containerMain: {
alignItems: 'flex-end',
},
tooltipWrapper: {
position: 'absolute',
top: 0,
right: 10,
padding: 5,
borderRadius: 4,
backgroundColor: 'rgba(0,0,0,0.6)',
},
tooltipStyle: {
fontSize: 11,
color: 'white',
},
questionMarkWrapper: {
justifyContent: 'center',
flexDirection: 'row',
marginRight: 10,
},
questionMark: {
fontSize: 16,
color: 'rgba(255,255,255,0.4)',
borderRadius: 50,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.4)',
borderStyle: 'solid',
height: 26,
width: 26,
paddingLeft: 9,
paddingTop: 2,
}
This is how the tooltip should look like (not the actual location):
And this is how it looks like now: