I am kinda new to React Native and I display for every person from my database their name and image, etc. But I don't fully understand how to take that image specifically from the database.
I tried is as shown below but that does not work. Anyone know a way out?
import { Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
import * as React from 'react';
import * as images from '../../';
export default function Person({ person, setShouldShowPerson }) {
const image = person.image;
return (
<TouchableOpacity
style={styles.person}
onPress={() => setShouldShowPerson(person)}
>
<Image
source={image}
style={[
styles.foto,
person.gender === '2'
? { borderColor: '#0A7ACC' }
: { borderColor: '#FFC7C2' },
]}
/>
<Text style={styles.text}>
{person.firstname} {person.lastname}
</Text>
</TouchableOpacity>
);
}
you can set the 'person id' or 'person name' to 'parson image file name' in your person images folder.
then :
<Image
style={styles.tinyLogo}
source={require('../../'+ {personid}+'.png'}
/>
Related
i have a problem when i want to send data of a URL so when you go to the next page your show the spesific url, im using expo cli not react native cli
website.tsx
import React, { useState } from "react";
import { Dimensions } from "react-native";
import { Div, Text } from "react-native-magnus";
import WebView from "react-native-webview";
const Website = ({YOUR_URL}) => {
return (
<WebView
rautomaticallyAdjustContentInsets={false}
source={{uri: YOUR_URL}}
style={{marginTop: 20, height: "100%", width: "100%"}}
onLoad={console.log("Loaded")}
startInLoadingState={true}
javaScriptEnabled={true}
/>
);
};
export default Website;
and this is my button to send the data
<Button w={wp(40)} h={hp(5.5)} ml={hp(2)}
onPress={() => navigation.navigate('Website', {YOUR_URL:data?.external_link})}
// onPress={() => Linking.openURL(data?.external_link)}
>
<Text allowFontScaling={false} fontSize={16} color="#fff">
Selengkapnya
</Text>
if you can help me, thank you very much
For me it worked by passing it precise values for width and height for Webview component and not percentage values. For managing the different display sizes I think you should use "scale".
I'm building a react-native app. Basically, it has a BottomTabNavigation for navigating through the screens.
In one of my screens, I want to open another screen with a BottomTabNavigation to navigate to other screens inside.
Unfortunately, I haven't found something on Google or in the search function. Is this possible to create?
You can do it easily using a module called react-native-best-viewpager!
Install with:
npm install --save react-native-best-viewpager or with yarn install react-native-best-viewpager if you're using yarn.
Here's an example of how to use it:
import {StyleSheet, View, Text} from 'react-native';
import React, {Component} from 'react';
import {PagerTabIndicator, IndicatorViewPager} from 'react-native-best-viewpager';
export default class ViewPagerPage extends Component {
render() {
return (
<View style={{flex:1}}>
<IndicatorViewPager
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
indicator={this._renderTabIndicator()}
>
<View style={{backgroundColor:'cadetblue'}}>
<Text>page one</Text>
</View>
<View style={{backgroundColor:'cornflowerblue'}}>
<Text>page two</Text>
</View>
<View style={{backgroundColor:'#1AA094'}}>
<Text>page three</Text>
</View>
</IndicatorViewPager>
</View>
);
}
_renderTabIndicator() {
let tabs = [{
text: 'Home',
iconSource: require('../imgs/ic_tab_home_normal.png'),
selectedIconSource: require('../imgs/ic_tab_home_click.png')
},{
text: 'Message',
iconSource: require('../imgs/ic_tab_task_normal.png'),
selectedIconSource: require('../imgs/ic_tab_task_click.png')
},{
text: 'Profile',
iconSource: require('../imgs/ic_tab_my_normal.png'),
selectedIconSource: require('../imgs/ic_tab_my_click.png')
}];
return <PagerTabIndicator tabs={tabs} />;
}
}
// How do you set the image on the top of the screen without losing the aspect ration?
[![import React, { Component } from 'react';
import { AppRegistry, View, Image, StyleSheet } from 'react-native';
export default class DisplayAnImageWithStyle extends Component {
render() {
return (
<View style={{flex:1}}>
<Image
resizeMode="contain"
style={{flex:1}}
source={{uri: 'https://i.pinimg.com/originals/ba/84/1c/ba841cc07934b508458a7faea62141a8.jpg'}}
/>
</View>
);
}
}
// Skip these lines if you are using Create React Native App.
AppRegistry.registerComponent(
'DisplayAnImageWithStyle',
() => DisplayAnImageWithStyle
);][1]][1]
// Here the liked image shows that it is not fitting well... it is not showing from the top... do you have any idea how I can set the image without any padding?
[1]: https://i.stack.imgur.com/LYNKn.png
So you might wanna use resizeMode: 'cover' with a height and width.
<Image
resizeMode="contain"
style={{ width: 200, height:220, resizeMode: 'cover'}}
source={{uri: 'https://i.pinimg.com/originals/ba/84/1c/ba841cc07934b508458a7faea62141a8.jpg'}}
/>
Here's an example https://snack.expo.io/HJTFg9tU4
Let me know if this works for you.
I am trying to load a remote placeholder image. The first image is a local image and loads properly, but not the second image. I am testing this on an android device so I don't think https would cause problems.
Any hints to what I might be doing wrong?
import React, { Component } from 'react';
import { Text, View, Dimensions, TouchableOpacity, Image, ToastAndroid, Animated } from 'react-native';
import styles from "./styles";
class Story extends Component {
constructor(props){
super(props);
this.state={};
}
render() {
return (
<View style={{position:'relative'}}>
<Image source={require('app/assets/images/campus.png')} style={styles.container}></Image>
<Image source={{ uri: 'https://place-hold.it/100x200/fdd.png' }} style={styles.character1}></Image>
</View>
);
}
}
export default Story;
// firstly set isImageload false
then implement image like this
var image= this.state.isImageload ? require('place holder image') : {uri: ImageUrl};
return(
<Image
source={immage}
onLoadStart={() => this.setState({isImageload : true})}
onLoad={() => this.setState({isImageload : false})}
/>
)
I removed one pair bracket from the Image tag and the code become:
<Image source={ uri: 'https://place-hold.it/100x200/fdd.png' } style={styles.character1}></Image>
Please try it to see whether if works.
I have a problem with React Native FlatList,
export default class PoolList extends Component {
constructor(props) {
super(props)
this.state = {
data: [
{key: 1, img: './resources/image1.png', txt: 'Text 1'},
{key: 2, img: './resources/image2.png', txt: 'Text 2'},
{key: 3, img: './resources/image3.png', txt: 'Text 3'}
]
}
}
render() {
return (
<View style={styles.view}>
<FlatList
data={this.state.data}
renderItem={({item}) =>
<View style={styles.flatListItem}>
<Image source={require(item.img)} />
<Text>{item.txt}</Text>
</View>
}
/>
</View>
);
}
}
I got a bug when run it
require() must have a single string literal argument
But when I change <Image source={require(item.img)} /> to <Image source={require('./resources/image1.png')} />, It works. Can someone explain to me why. I need to make a FlatList with Image dynamic, Thanks
It took me quite a while to figure out a workaround to this problem. Don't worry, require() must have a single string literal argument is a really common problem in the JavaScript community because require has a lot of issues with variables being passed in as the string argument.
This is the best workaround I could come up with.
So instead of using a flatlist, I decided to use a map. First off, you need to create constants for each of the images you want to dynamically import from a local directory. Then you need to create an array of objects so each object will be one of your image constants. Now, iterate through each entry using the map and generate your <Image> components. Finally, render the variable with all the components you just created.
To view the full code for the solution I wrote, visit the ExpoSnack I created.
https://snack.expo.io/HyNO-pLQG
SnackExpo also has an in-browser device simulator included.
To run this app on your physical device, you can download the Expo app and then scan the QR code provided by the ExpoSnack.
import React, {Component} from 'react';
import {View, Image, StyleSheet} from 'react-native';
const image1 = require('./resources/image1.png');
const image2 = require('./resources/image2.png');
const image3 = require('./resources/image3.png');
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
image: {
width: 200,
height: 200,
},
});
var dataArray = [
{data: image1},
{data: image2},
{data: image3},
];
var theReturnData = dataArray.map((item) => (
<View key={item}>
<Image
style={styles.image}
source={item.data}
/>
</View>
));
export default class App extends Component {
render() {
return (
<View style={styles.container}>
{theReturnData}
</View>
);
}
}