I currently have the following in a React Native app:
<TextInput
style={styles.input}
placeholder="Phone"
value={formState.phone}
/>
The value in the above is a phone number how can I make it to where this value text input is an href or link a user can click and dial out?
From a few answers I've seen there is "Linking" from expo in a managed workflow. The example given is:
<Text {...this.props} onPress={this._handlePress}>
{this.props.children}
</Text>
How would I be able to use Linking or any other method to achieve this?
You can also use Parsed Text.
handlePhonePress = (url) => {
Linking.openURL(url);
}
<ParsedText
style={styles.text}
parse={
[
{type: 'phone', style: styles.phone, onPress: this.handlePhonePress},
]
}
>
...
</ParsedText>
By doing this your phone number will also accepts style e.g. you can make it underlined and blue
import { Linking } from "react-native";
_handlePress() {
Linking.openURL(`tel:${phoneNumber}`);
}
Related
Hi friends I hope you are doing very well ^^
I am struggling to get a TextInput value when a user enters it in a simple basic form I've created, here is the field :
<TextInput placeholder='latitude' name='lat'/>
<Button style={styles.signIn}
title="Show my entered text"
onPress={() => {
alert(this.state.lat)}}
/>
I tried so many methods to get the value of this field but unfortunately none works.. I am new to react native so I really don't know how can this be done properly (is there any variable I need to define) because in javascript I used to get it only by the GetElementById quite simple right XD
I tried creating a variable exactly bellow the imports like this :
value={this.state.lat}
So I can get the above textInput actual value entered by the user but it isn't working at all and my alert function is not returning anything (I actually don't know if alert() is a react native integrated function or I need to define it from scratch :/), please help I am really lost I tried many solutions on the web but nothing resolves my problem. Thanks in advance
Try this sample code
class Example extends React.Component {
state = { lat: "" };
render() {
return (
<View>
<TextInput
placeholder="latitude"
name="lat"
value={this.state.lat}
onChangeText={(text) => this.setState({ lat: text })}
/>
<Button
style={styles.signIn}
title="Show my entered text"
onPress={() => {
alert(this.state.lat);
}}
/>
</View>
);
}
}
Some iOS devices seems to be showing a , (comma) instead of a . on the decimal-pad. I believe this is to do with the keyboard language / locale. Is there a way I can force the decimal-pad to show a . regardless of keyboard language / locale?
<TextInput
rejectResponderTermination={false}
style={[
{
fontSize: entryValueFontSize,
height: height,
},
calculatorStyles.inputsShared,
calculatorStyles.amountInput,
theme.inputsShared,
]}
autoCapitalize={'none'}
placeholder={entryValueLabel}
placeholderTextColor={theme.placeholderTextColor}
keyboardType={'decimal-pad'}
returnKeyType={'done'}
defaultValue={''}
value={isNaN(this.state.entryValue) ? '' : this.state.entryValue}
onChangeText={(entryValue) => {
this.onEntryValueChange(entryValue);
}}
/>
Problem:
Desired output:
It is not possible to force keyboard to use comma. It is based on Region for example Czechia has comma. The solution I have created is to replace comma for decimal with point once comma is entered
<TextInput
onChangeText={(entryValue) => {
// I am passing keyboardType as prop
if (keyboardType === 'decimal-pad') {
this.onEntryValueChange(entryValue.replace(',', '.'));
} else {
this.onEntryValueChange(entryValue);
}
}}
/>
How to display "text is copied" to the user after the text has been copied?
const dataArray = [ { title: "Invoice Reference Number", content:QRCODE_SAMPLE.Irn } ];
<TouchableOpacity activeOpacity={1}
onPress={() => Clipboard.setString(QRCODE_SAMPLE.Irn)}>
<Accordion style={{paddingTop:10,paddingBottom:50,backgroundColor:'#E0DDDD'}}dataArray={dataArray} expanded={1}>
</Accordion>
</TouchableOpacity>
You can do it like this :
import {ToastAndroid} from 'react-native';
Create this function :
onCopyPressed(){
Clipboard.setString(QRCODE_SAMPLE.Irn);
ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
}
And call that function like this :
const dataArray = [ { title: "Invoice Reference Number", content:QRCODE_SAMPLE.Irn } ];
<TouchableOpacity activeOpacity={1}
onPress={this.onCopyPressed.bind(this)}>
<Accordion style={{paddingTop:10,paddingBottom:50,backgroundColor:'#E0DDDD'}}dataArray={dataArray} expanded={1}>
</Accordion>
</TouchableOpacity>
I have never used the clipboard before but I assume your code is working, then:
const [clipboardString, setClipboardString] = useState('');
handleClipboardAction = (str) => () => {
Clipboard.setString(str);
setClipboardString(setClipboardString)
}
<TouchableOpacity activeOpacity={1}
onPress={handleClipboardAction(str)}>
<Accordion style={{paddingTop:10,paddingBottom:50,backgroundColor:'#E0DDDD'}}dataArray={dataArray} expanded={1}>
</Accordion>
</TouchableOpacity>
Then you can observe the state to see if there's anything copied and conditional render the "Text is copied" message:
{clipboardString.length > 0 && <Text>Text is copied</Text>}
The most simple way is using a package that mixes between them:
https://www.npmjs.com/package/react-native-clipboard-toast
React Native Clipboard API with Animated toast message component
Support both Android and iOS | Used react native Clipboard | Toast by
calling api
Unable to display the text entered in the Eventform and show it on the flatlist of EventList page.I am new to react native just need some help to solve the problem. Learning to develop a notes application.
EventForm js I am entering the text in it which has name location and notes field but when press add button does not showing it in the flatlist.
class EventForm extends Component {
state = {
title: null,
date: '',
};
handleAddPress = () => {
saveevents(this.state)
// console.log('saving events:', this.state);
.then(()=> this.props.navigation.goBack());
}
// handlePress() {
// this.props.onBtnPress()
// }
// }
handleChangeTitle = (text) => {
this.setState({ title: text });
}
handleChangeLocation =(text) => {
this.setState({location: text});
}
render() {
return (
<View
style={{
flex: 1
}}
>
<View style={styles.fieldContainer}>
<TextInput
style={styles.text}
placeholder="Name"
spellCheck={false}
value={this.state.title}
onChangeText={this.handleChangeTitle}
/>
<TextInput
style={styles.text}
placeholder="Enter your Location"
spellCheck={false}
value={this.state.location}
onChangeText={this.handleChangeLocation}
/>
<AutoExpandingTextInput
placeholder="Write your Notes here"
spellCheck={false}
style={[styles.default, {height: Math.max(35, this.state.height)}]}
value={this.state.text}
/>
</View>
<TouchableHighlight
onPress ={() =>this.handleAddPress.bind(this)}
// onPress={this.handleAddPress}
style={styles.button}
>
<Text style={styles.buttonText}>Add</Text>
</TouchableHighlight>
</View>
EventList js where I would like to display the dynamic text entered in EventForm should appear in flatlist. I am saving the flatlist content in db json file and calling it in the EventList.
const styles = StyleSheet.create({
list: {
flex: 1,
paddingTop: 20,
backgroundColor: '#A9A9A9'
},
});
class EventList extends Component {
state = {
events: [],
}
componentDidMount() {
//getEvents().then(events => this.setState({ events }));
const events = require('./db.json').events;
this.setState({ events });
}
render() {
return [
<FlatList
key="flatlist"
style={styles.list}
data={this.state.events}
renderItem={({ item, seperators }) => (<EventCard events=
{item} />)}
keyExtractor={(item, index) => index.toString()}
/>,
My db json file is this which I have manually entered the details.Data that is dynamically entered have to save in db json file and should reflect in the flatlist.
{
"events":[
{
"name":"chandu",
"date":"15-06-2018 ",
"location":"Sydney",
"content":"How are you..?",
"id":"05dafc66-bd91-43a0-a752-4dc40f039144"
},
{
"name":"bread",
"date":"15-07-2018 ",
"location":"Sydney",
"content":"I bought bread..?",
"id":"05dafc66-bd91-43a0-a752-4dc40f039145"
}
]
}
I am expecting whatever the text that is entered in the form should save and show me on the Flatlist which is in EventList file. Please help if you get any solution for it.
I have added alert message when onPressed to show that whether it is pressed or not.
I am expecting whatever the text that is entered in the form should save and show me on the Flatlist which is in EventList file. Please help if you get any solution for it.
I have added alert message when onPressed to show that whether it is pressed or not.
Your EventForm and EventList are two separate component without any shared props.
Assuming you are updating db.json file (using file read/write methods) from EventsForm component, still in the EventsList the data is fetched only once on componentDidMount.
You will need to pass the data for EventList as props or keep in state. If you keep it in props, then you must update the value of state using some life cycle method such as getDerivedStateFromProps props or something similar.
Edit:
I would suggest using global state management library like redux, for saving your data entered in the EventForm component, instead of read/write in a file.
You can save the data by dispatching an action in your EventForm component.
Later access that data in you EventList component using
this.props.your_db_name
You can save this data even on app kill using redux-persist
If you still want to continue with file read/write, you can look at this library react-native-fs
This is my JSON file
{
"name": "Thịt bò",
"noed": 5
},
{
"name": "Thịt heo",
"noed": 3
}
I get them to Flatlist
<FlatList
data={cats}
keyExtractor={item => item.name}
renderItem={({item})=>(
<View>
<Text style={styles.catsItem} onPress={() => this.changeTextInput(item.name)}>{item.name} {item.noed}</Text>
</View>
)}
/>
But I want to send 2 values are item.name and item.noed to TextInput then send them to another screen
changeTextInput(item){
this.setState({name: item});
};
But I don't know how to send item.noed to TextInput and how to send them to another screen.
I'm quite new, so please help me.
Use react-navigation npm package to redirect from one screen to another screen you can also pass values
There are two pieces to this:
Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function:
this.props.navigation.navigate
('RouteName', { /* params go here */ })
onPress={()=>this.props.navigation.navigate('Details',
{ itemId: 86, otherParam: 'anything you want here', })};
Read the params in your screen component:
this.props.navigation.getParam(paramName, defaultValue)
For more information please read the following document
React Navigation Link