I'm trying to load a JPG image from my local folder in my react-native application.
The image is stored inside assets folder which I''m trying to render inside Image tag
Here's my JSON object
{
title: 'Device 2',
image: '../assets/imgs/device_default.jpg',
cta: 'View device',
mac: '1234-xxxx-xxxx-5678'
},
Here's my code for the same
<Block flex style={imgContainer}>
<Image source={{uri: item.image}} style={imageStyles} />
</Block>
here item contains the props value. I can iterate other values like title and mac
but not able to render the image.
Can anyone help me on this??
JSON
title: 'Device 2',
src : require('../assets/imgs/device_default.jpg'),
cta: 'View device',
mac: '1234-xxxx-xxxx-5678'
},
HTML
<Block flex style={imgContainer}>
<Image source={item.src} style={imageStyles} />
</Block>
Got the exact solution here
dynamic paths in require are not currently supported.The only allowed way to refer to an image in the bundle is to literally write require('name-of-the-asset') in the source.
you need to add require for image in your json.Check below example
const Profiles=[
{
"id" : "1",
"name" : "Peter Parker",
"src" : require('../images/user1.png'),
"age":"70",
},
{
"id" : "2",
"name" : "Barack Obama",
"src" : require('../images/user2.png'),
"age":"19",
},
{
"id" : "3",
"name" : "Hilary Clinton",
"src" : require('../images/user3.png'),
"age":"50",
}
]
export default Profiles;
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 went through the react-native props and come to know they added selectedTextTrack for subtitle support. But, how exactly it can be added I'm unable to write code.
Can I add a file(.SRT) as input for a subtitle?
<Video
source={{uri: ''}}
resizeMode={this.state.resizeMode}
style={mediaPlayerStyle.player}
rate={this.state.rate}
volume={this.state.volume}
paused={this.state.paused}
onLoad={this.onLoad}
onProgress={this.onProgress}
onEnd={this.onEnd}
repeat={true}
selectedTextTrack={{
type: 'index',
value: 0
}}
textTracks={[
{
index: 0,
title: "English CC",
language: "en",
type: TextTrackType.VTT, // "text/vtt"
uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt"
},
{
index: 1,
title: "Spanish Subtitles",
language: "es",
type: TextTrackType.SRT, // "application/x-subrip"
uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
}
]}
/>
So basically i want to add subtitles for one video in various languages, If it is .srt file that would be a great help
use react-native-video-controls that renders subtitles on top of the video using JavaScript, which you might try.
In order to use subtitles you should follow the below instructions : First if your subtitle format is srt you should convert it to JSON(use websites like : http://multiverso.me/srtToJSON/) Then when you got the array of JSONs, you can pass this array to VideoPlayer as below :
<VideoPlayer subtitle={this.props.subtitle}/>
The subtitle prop expects the JSON to have the following key-value format:
[{
"startTime": "00:00:04,123", //hh:mm:ss,SSS
"endTime": "00:00:05,001",
"text": "When you convert your subtitle file, you might need to modify your JSON"
},
{
"startTime": "00:00:08,008",
"endTime": "00:00:09,876",
"text": "Before passing it to the VidePlayer component"
}]
So I have two components
<TouchableInput
onPress={() => this.interestedInPicker.togglePicker()}
/>
<RNPickerSelect
placeholder={{}}
items={[
{
label: 'text',
value: 'value`,
},
{
label: 'text'
value: 'value',
},
{
label: 'text',
value: 'value',
},
]}
onValueChange={restInput.onChange}
style={styles.interestedInPicker}
value={restInput.value}
ref={ref => (this.interestedInPicker = ref)}
/>
RNPickerSelect has height of 0 so it is hidden.
When I press on the TouchableInput I want the function togglePicker to trigger. This works on iOS but logs undefined on Android. When I console.log this.interestedInPicker I can see the method I need but when I log the whole expression it is undefined. Any idea what is going on ?
I opened this as an issue for library RNPickerSelect about a month ago.
It is a known problem. The issue is that they need a way to trigger the picker programatically. You might be able to find a temporary solution HERE
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
I use the new API <SectionList/> to build a list UI, but I found issues running on Android devices.
While scrolling down with SectionList, only a few new cells/rows can be displayed at once. You need to scroll SectionList down again to display the next a few new cells/rows, and wait for the next cells are ready to be displayed. It works not the same on the iOS.
When reaching the last item in the SectionList, I tried to scroll up quickly to the first item in the SectionList, and it display a blank view with a few seconds till the cells are rendered.
I have hundred rows (country list) for display, and the user experience is bad. The user takes many seconds to reach the last item in the country list, and takes many seconds to show the previous rows after scrolling up quickly.
export default class LoginCountryList extends React.Component {
props: LoginCountryListProps;
static defaultProps = {
data: {},
};
renderRow = (rowItem: any) => {
console.log('render row:');
return (
<TouchableHighlight
onPress={() => this.props.onSelectRow(rowItem.item)}
>
<View style={styles.row}>
<Text style={styles.rowLeftText}>{rowItem.item.name}</Text>
<Text style={styles.rowRightText}>{`+${rowItem.item.ccc}`}</Text>
</View>
</TouchableHighlight>
)
};
renderSectionHeader = (sectionItem: any) => (
<View
style={styles.sectionHeader}
>
<Text style={styles.sectionHeaderText}>{sectionItem.section.title}</Text>
</View>
);
render() {
console.log('re-render section list')
return (
<View style={styles.container}>
<NavigationBar.TextStyle
title={title}
leftText={leftText}
onLeft={this.props.onBack}
/>
<SectionList
style={styles.listView}
sections={this.props.data}
renderItem={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
/>
</View>
);
}
}
// data:
const data = [
// first section
{
"title": "A",
"key": "A",
"data": [
// first row
{
"ccc": "93",
"countryCode": "AF",
"currencyCode": "AFN",
"currencySymbol": "؋",
"name": "Afghanistan",
"key": "AF"
},
{
"ccc": "355",
"countryCode": "AL",
"currencyCode": "ALL",
"currencySymbol": "Lek",
"name": "Albania",
"key": "AL"
},
...
]
},
...
]
I tried to log in the renderItem callback when SectionList did display, and it calls renderItem hundred times for displaying only 15 rows in the first section.
Log a constant string render row: with hundred times when the SectionList did display:
Log the indexes of the items when the SectionList did display. The same row did render multiple times when the SectionList did display.
Did use SectionList wrongly? How do I do to fix it?
Environment
react-native -v: 0.45.1 & 0.46.1 (tried both version)
node -v: v7.8.0
npm -v: 4.2.0
yarn --version (if you use Yarn): 0.22.0
Target Platform (e.g. iOS, Android): Android
Development Operating System (e.g. macOS Sierra, Windows 10): macOS
Build tools (Xcode or Android Studio version, iOS or Android SDK version, if relevant): Android SDK 25.0.2