I want to use the Alert Api to display OS behavior alerts.
I'm asking myself if you can display Hyperlinks inside the Text of an alert?
Alert.alert(
'Alert',
'This is an Alert. I want to include hyperlinks here.',
[
{
text: 'Cancel',
onPress: () => console.log("Alert cancel"),
style: 'cancel',
},
{
text: 'Accept',
onPress: () => console.log("Alert accept"),
style: 'default'
},
]
);
You could implement a dialog container, and use the React Native Linking component on the Dialog.Description onPress() to turn it into a hyperlink:
<Dialog.Description onPress={() => Linking.openURL('https://www.google.com')}
style={{ textDecorationLine: 'underline', color: 'blue' }}>www.google.com</Dialog.Description>
or you could add a Text component inside the Dialog.Description alongside some other text to just have a certain word be the hyperlink:
<Dialog.Description>
Visit this website:
<Text onPress={() => Linking.openURL('https://www.google.com')}
style={{ textDecorationLine: 'underline', color: 'blue' }}>www.google.com</Text>
</Dialog.Description>
A word of caution, you're suppose to only pass a string to the Dialog.Description and doing the above will give you a console warning. So use at your own caution but it's working fine for me, and you can hide the warning using the React Native YellowBox component by adding this line outside of your class export (so near the import statements):
YellowBox.ignoreWarnings(['Failed prop type: Invalid prop `children` of type `array` supplied to `DialogDescription`, expected `string`'])
Much better to create a Modal (or simply a View component with position: absolute) to handle this than to dive into the native code.
https://facebook.github.io/react-native/docs/0.56/modal
You need to install "react-native-dialogs"( an android only module for material design dialogs) as follows:
1] Installation:
npm install react-native-dialogs --save
2] Linking:
react-native link react-native-dialogs
3] Import it in your page:
import DialogAndroid from 'react-native-dialogs';
also need to add below code inside your render:
<Button title="show custom alert" onPress={this.showCustomAlert} />
and at last add below function in your screen:
showCustomAlert() {
DialogAndroid.alert('Alert', `This is a link Google`, {
contentIsHtml: true
});
}
You can find more details here https://github.com/aakashns/react-native-dialogs
This is possible using the Linking module that comes with React-Native. Please check out the following:
Display hyperlink in React Native App
If this doesn't work maybe try this npm package:
https://www.npmjs.com/package/react-native-hyperlink
Related
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}`);
}
I'm trying to throw together a simple phone app mockup using React Native & React Native Elements as a set of UI components. I want to set the styling of various elements to a common theme, so I'm following the example in the documentation: https://reactnativeelements.com/docs/customization#using-themeprovider.
But the trouble with the example there (as it says in the docs), it sets the style of all buttons. What I'd like to do is to set the background colour of only the solid buttons for example, leaving the clear buttons, clear! Can anyone point me in the right direction of how to do this?
Current snippet (trimmed to save space):
const myTheme = {
Button: {
buttonStyle: {
borderRadius: 4,
backgroundColor: '#03E0EE',
},
titleStyle: {
color: '#180D43',
},
},
};
...
<ThemeProvider theme={myTheme}>
<View style={styles.footerContainer}>
<Button title="Primary Button"/>
<Button title="Secondary Button" type="clear" />
</View>
</ThemeProvider>
Create a wrapper component for SolidButton and or ClearButton. Make this wrapper components consuming the myTheme context with style props (e.g. ButtonSolid\ButtonClear). AFAIK there are no selector capabilities like in css.
In my react-native project, I would like to implement a feature that tapping on an icon pops up a native picker component in iOS and Android respectively. Something like this library's effect:
But with the linked library, it always default to have a text input field clicking on which the picker native component pops out. But in my project I don't need that default text input field, I have an icon component (think it as whatever react-native custom component), I would like to have the same effect when clicking/tapping on the icon component.
Is it possible to achieve it with the library I linked? I noticed there is icon property in the library, but it is not clear how to use it and whether it is the property that could replace the text input field. Anyone could you please help me?
This is what I tried with the library, but it doesn't show MyIconComponent instead it still shows a input text field:
return (
<RNPickerSelect
onValueChange={value => console.log(value)}
icon={() => {
return (
<View style={styles.main}>
<MyIconComponent />
</View>
);
}}
items={[
{label: 'Football', value: 'football'},
{label: 'Baseball', value: 'baseball'},
{label: 'Hockey', value: 'hockey'},
]}
/>
);
If I can't achieve what I want with this library then how to implement the same effect when tapping on my icon component?
According to the library documentation, in order to remove the default field add "placeholder={}" to the component props.
That is what you are looking for? did I get you right?
Background
I am using xotahal/react-native-material-ui material design in my React-Native application. I have implemented the ActionButton with multiple buttons in it. I can not find anywhere in the docs that is explains how to use this. I was able to find the component in the git repo and managed getting the buttons to render but I can't get them to fire of onClick().
Example
The buttons appear when the main blue button is clicked.
Question
What is the proper way to pass functions to these buttons, or where in the documentation is this explained?
Code
<ActionButton
actions={[
{ icon: 'note-add', label: 'Add', onPress: () => this.toggleSearch() },
{ icon: 'save', label: 'Save', onPress: () => this.handleOnSave() },]}
/>
toggleSearch() {
console.log('################## HEY SEARCH WORKS ##########################');
}
Problem with this is that no functions are fired when I click the button.
I would be grateful if someone knows where this is explained in the documentation.
ActionButton actions prop expects an object with the shape of {icon, label, name}. If you want to handle onPress you need to define it as a prop to the component and not to the actions object.
Example
<ActionButton
actions={[
{ icon: 'note-add', label: 'Add' },
{ icon: 'save', label: 'Save'}]}
onPress={(text) => this.onPress(text)}
/>
// ...
onPress(text) {
switch(text) {
case:
// do something on this case
break;
case:
// do another thing on this case
break;
}
}
I've copied a code for an AndroidToolBar from React Native's UIExplorer:
<ToolbarAndroid
logo={require('image!launcher_icon')}
navIcon={require('image!ic_menu_black_24dp')}
onIconClicked={() => this.drawer.openDrawer()}
style={styles.toolbar}
title={title}
/>
But it seems like the image!launcher_icon and image!ic_menu_black_24dp are missing. I am getting a missing error:
It seems like some a system's baked-in icon.
How can I use this icon?
How can I use my own png file?
That is old syntax. It has been changed in the recent versions.
<ToolbarAndroid
logo={require('./ic_launcher_icon.png')}
navIcon={require('./ic_menu_black.png')}
onIconClicked={() => this.drawer.openDrawer()}
style={styles.toolbar}
title={title}
/>
Check out this guide https://facebook.github.io/react-native/docs/images.html#content
https://facebook.github.io/react-native/docs/image.html#content
Try with updated syntax and define the correct path for image resource, I have made "images" folder inside "app" to store all my images at one place. You may skip them.
<ToolbarAndroid style ={{height:56, backgroundColor:'#e0e0e0'}}
logo={require('./app/images/jd_home.png')}
title={"MyApp"}
actions={[{title: 'More', icon: require('./app/images/more.png'), show: 'always'},
{title: 'Settings', icon: require('./app/images/settings.png'), show: 'always'}]}
/>