i have list in which i want to show image like this
this is my list component I have giving correct path but nothin happens have giving width and height but no luck
import React from "react";
import {
View,
Text,
StyleSheet,
Button,
Image,
ImageBackground,
} from "react-native";
import colors from "../config/colors";
import AppText from "./AppText";
export default function ListItem({ image, title, sutitle }) {
return (
<View style={styles.container}>
<Image style={styles.image} source={image} />
<View style={styles.tittleContainer}>
<AppText style={styles.title}>{title}</AppText>
<AppText style={styles.subtitle}>{sutitle}</AppText>
</View>
</View>
);
}
const styles = StyleSheet.create({
image: {
width: 70,
height: 70,
borderRadius: 35,
marginRight: 10,
},
container: {
flexDirection: "row",
},
sutitle: {
fontWeight: "bold",
color: colors.red,
},
tittleContainer: {
padding: 20,
},
title: {
fontWeight: "bold",
marginBottom: 7,
},
});
I am unable to render image on my screen
the issue is while providing props to ListItem component you're passing "Image". and while using it in the component you're using "image".
I hope this solves your issue.
Image is working copy past your code nothing else,
check your image path correctly
https://snack.expo.io/#jsfit/image
export default function ListItem({ image, title, sutitle }) { in this params you are getting the image as lower i and when you are passing with Image as capital I.
Related
I am (newbie) working on an iOS app using react-native. I want to show an image illustration when app goes offline or there is no internet connection to inform the user. I have done all set up required such as :-
1. My image is at src/assets folder
2. using this image in screen - which will be displayed when app detects no internet connection.
In iOS simulator it works fine, but when I run it on iPhone it does not show that image only text appears.
NoInternetScreen.js
import React from 'react';
import {View, StyleSheet, Image, Text} from 'react-native';
const NoInternetScreen = props => {
return(
<View style={styles.imageContainer}>
<Image style={styles.image} source={require('../assets/NoConnection.png')}/>
<View style={styles.textContainer}>
<Text style={styles.text}>No Internet connection</Text>
</View>
</View>
)
}
const styles = StyleSheet.create({
imageContainer: {
flex:1,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20,
},
image: {
width: 160,
height: 220,
alignSelf: 'center',
},
textContainer: {
marginVertical: 15,
},
text: {
fontSize: 20,
}
});
export default NoInternetScreen;
Login.js - which uses NoInternetScreen
import React, {useContext} from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
import {NetworkContext} from '../NetworkContext';
import NoInternetScreen from './NoInternetScreen';
const Login = props => {
const isConnected = useContext(NetworkContext);
return (
isConnected ? <View style={styles.container}>
<Text> Login </Text>
</View> : <NoInternetScreen/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
export default Login;
Could you please suggest what could be done to fix it?
Thanks and Regards,
Ankur
Just like HTML, we have the opportunity to show a text i.e.
<img src="hello.png" alt="hello" />
There is plenty of suggestions for replacing an image with another image (fallback src), but I need to show a text instead of any other images!
React Native Image onError method will execute on Image when image not found on server or unexpectedly something wrong goes with the connection. Using that you can display text as below,
import React, { Component } from "react";
import { Text, View, Image, StyleSheet } from "react-native";
export default class Example extends Component {
state = {
isLoadingImage: true,
isImageFailed: false
};
onErrorLoadingImage = () => {
this.setState({
isLoadingImage: false,
isImageFailed: true
});
};
render() {
return (
<View style={styles.container}>
{!this.state.isImageFailed ? (
<Image
source={{
uri:
"https://reactnativecode.com/wp-content/uploads/2017/10/Guitar.jpg"
}}
style={styles.imageStyle}
onError={this.onErrorLoadingImage}
/>
) : (
<View style={styles.container}>
<Text>Error loading image</Text>
</View>
)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
justifyContent: "center",
alignItems: "center"
},
imageStyle: {
resizeMode: "center",
width: "50%",
height: "50%"
}
});
Unfortunately, there is no other way to display text just like HTML alt=" Error loading image "
Hope this will help you.
Why animation does not work?
All code
import React, { Component } from 'react';
import {
AppRegistry,
View,
Image,
StyleSheet,
WebView,
Linking,
TouchableOpacity,
Animated,
Keyboard,
TextInput,
KeyboardAvoidingView
} from 'react-native';
import {
Button,
Text,
Container,
Card,
CardItem,
Body,
Content,
Header,
Title,
Left,
Icon,
Right,
Form,
Picker,
Item
} from 'native-base';
import { Actions } from 'react-native-router-flux';
import { styles, colors, paddings, fonts } from '../styles';
import DefaultInput from "./DefaultInput";
import validate from "./Validation";
import ModalComponent from "./Modal";
import ModalDropdown from 'react-native-modal-dropdown';
import { LinearGradient } from 'expo';
import CheckBox from 'react-native-check-box';
class CheckIn extends Component {
constructor(props) {
super(props);
this.inputMarginTop = new Animated.Value(8);
}
componentWillMount () {
this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
}
componentWillUnmount() {
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
}
keyboardWillShow = (event) => {
Animated.timing(this.inputMarginTop, {
duration: event.duration,
toValue: 2,
}).start();
};
keyboardWillHide = (event) => {
Animated.timing(this.inputMarginTop, {
duration: event.duration,
toValue: 8,
}).start();
};
render() {
console.log(this.inputMarginTop._value);
return (
<View style={{height: '100%', alignItems: 'center', flexDirection: 'column'}}>
<TextInput
style={{width: '90%', height: 20, borderWidth:1, marginTop: 100}}
/>
<View style={{width: '90%'}}>
<Animated.Text style={{marginLeft: 10, marginBottom: 8, marginTop: `${this.inputMarginTop}%`}}>Имя</Animated.Text>
</View>
</View>
);
}
}
export default CheckIn;
Important parts of the code
this.inputMarginTop = new Animated.Value(8);
<View style={{width: '90%'}}>
<Animated.Text style={{marginLeft: 10, marginBottom: 8, marginTop: `${this.inputMarginTop}%`}}>Имя</Animated.Text>
</View>
Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work?
Fist of all, which device are you running on? if it is Android, then it will not work, find it here https://facebook.github.io/react-native/docs/keyboard.html
keyboardWillShow as well as keyboardWillHide are generally not
available on Android since there is no native corresponding event.
If it is iOS, then you should use Animated.View instead of Animated.Text.
Try the following code:
<Animated.View style={{width: '90%', marginLeft: 10, marginBottom: 8, marginTop: `${this.inputMarginTop}%`}}>
<Text>Имя</Text>
</Animated.View>
Generally, for Text component, you should move all the position/layout related style to its parent View, the style in Text is normally related to font itself, like color, fontSize, fontStyle etc.
Also try console.log(event.duration) to make sure the event contains duration which is not 0.
I just want to fit an image of any size to the phone screen, so it just stays there as a background. I have the same issue with a logo I'm trying to put in the footer, I can't get it to fit in the it's view container.
I've tried many solutions I found in similar questions, using resizeMode and many width/height values, but nothing seems to work. My image is always displayed the same way.
Code for the image component:
import React from 'react';
import { View, Image } from 'react-native';
const Workspace = (props) => {
return (
<View
style = {styles.workspaceStyle}>
<Image
source={props.img}
resizeMode = 'contain'/>
{props.children}
</View>
);
};
const styles = {
workspaceStyle: {
flex: 1
}
}
export default Workspace;
My app.js render and style code:
render() {
return (
<View style = {{flex: 1}}>
<Workspace
img={require('./images/quarto.png')}/>
<ScrollView>
<Header>
<HeaderItem img={require('./images/camera.png')}/>
<HeaderItem img={require('./images/camera.png')}/>
<HeaderItem img={require('./images/camera.png')}/>
<HeaderItem img={require('./images/camera.png')}/>
</Header>
</ScrollView>
<ScrollView style = {{flexDirection: 'row'}}>
{this.sideMenuShow()}
</ScrollView>
<Footer>
<View style = {styles.logoContainerStyle}>
<Image
style = {styles.logoStyle}
source = {require('./images/magicalStage.png')}
resizeMethod = "scale"
/>
</View>
<Text style = {{color: 'white', marginTop: 5, marginBottom: 2}}>teste, teste, teste, teste</Text>
</Footer>
</View>
);
}
}
const styles = {
logoContainerStyle: {
marginRight: 5,
marginLeft: 5,
marginTop: 2,
marginBottom: 3,
width: "20%"
},
logoStyle: {
paddingLeft: 2,
paddingRight: 2
}
}
Thanks in advance!
EDIT:
In app.js, your outer view need to use width and height of the screen:
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
Next, in Workspace: use stretch instead of contain ( same for your footer, add resizeMode )
resizeMode: 'stretch',
I do mine like this:
BackgroundImageStyle.js
import { StyleSheet } from 'react-native'
export default StyleSheet.create({
container: {
flex: 1,
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0
},
image: {
flex: 1,
resizeMode: 'cover',
}
})
BacgroundImage.js
import React, { Component } from 'react'
import { View, Image } from 'react-native'
import styles from './BackgroundImageStyle'
export default class BackgroundImage extends Component {
render() {
return (
<View style={styles.container} >
<Image
style={styles.image}
source={this.props.source}
/>
</View>
)
}
}
then you can use it like
<BackgroundImage source={your_image}/>
I hope everything is clear, the trick is to set position absolute and then top, left, bottom, and right to 0
You can use the ImageBackground component from react-native
https://facebook.github.io/react-native/docs/imagebackground
return (
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
);
On Android 4.4, ListView separator lines are inconsistent in thickness, and some do not render.
I can't see how this can be a code issue, this is how I render them:
separator: {
height: 1,
backgroundColor: 'grey',
}
...
<ListView
renderSeparator={(sectionID, rowID) =>
<View key={`${sectionID}-${rowID}`} style={styles.separator} />
}
.../>
Here is a screenshot of a View with this problem:
This issue does not happen on iOS or Android 6.
Anyone had this problem before?
Update
I did a test, this is not Android4 issue. It happens on all API version when running on Nexus One device (in android emulator)
I had this issue on iOS and worked around it by adding a hairline margin, like so:
<View
style={{
...styles,
borderWidth: StyleSheet.hairlineWidth,
margin: StyleSheet.hairlineWidth,
}}
>
{// ...row content}
</View>
Just give the height:hairlineWidth in style
I had the same issue and solved changing the view height from a number to StyleSheet.hairlineWidth as some folks said before. Trying to be more visual/specific:
Before:
renderItemSeparator() {
return (
<View style={{ height: .2, backgroundColor: 'rgba(0,0,0,0.3)' }} />
);
}
After:
renderItemSeparator() {
return (
<View style={{ height: StyleSheet.hairlineWidth, backgroundColor: 'rgba(0,0,0,0.3)' }} />
);
}
Actually there is no fix. It's RN "render-canvas-bug".
But I found hack solution.
<ListView
style={Style.listView}
dataSource={data}
renderRow={(data) => this._renderRow(data)}
/>`
Style.listView: {
backgroundColor: '#fff',
}, // or another backgroundColor you need
Then:
_renderRow(goods) {
return (
<View key={'goods_' + goods.id} style={Style.listView_item}>
<TouchableOpacity or View or ...
style={[Style.flex, Style.flexRow, Style.separatorRow, Style.u_paddingVerticalS, Style.u_middle]}
onPress={() => this._xyz(goods)}>
<View>
<AppFont>{goods.name}</AppFont>
</View>
</TouchableOpacity or View or ...>
</View>
);
}
Only important TouchableOpacity style is Style.separatorRow to render your separator. This style should be inside listView_item, where you can use another styles.
listView: {
backgroundColor: '#fff',
},
listView_item: {
paddingHorizontal: em(1.5),
},
flex: {
flex: 1,
},
flexRow: {
flexDirection: 'row',
},
separatorRow: {
marginBottom: 1,
borderBottomWidth: 1,
borderBottomColor: Colors.canvasColor,
},
You can use StyleSheet.hairlineWidth instead of 1 but it's not a must.
I reported it on GitHub
My workaround was to style the containing view and text like this:
const styles = StyleSheet.create({
rowViewContainer: {
flex: 1,
paddingRight: 15,
paddingTop: 13,
paddingBottom: 13,
borderBottomWidth: 0.5,
borderColor: '#c9c9c9',
flexDirection: 'row',
alignItems: 'center',
},
rowText: {
marginLeft: 15,
},
});
This is the ListView:
<ListView
dataSource={this.state.dataSource}
renderRow={(data) => <View style={styles.rowViewContainer}>
<Text style={styles.rowText}>
{data.bb_first_name}
</Text>
</View>}
/>
Looks nice:
This happens because you have empty rows in your data source. You can style your separators to see it
To avoid this just filter your data.
I faced the same issue when trying to render a Divider with a width of 0.5.
It rendered properly on devices with pixel ratio of 2 (e.g. iPhone SE 2nd gen.) but rendered random width on devices with pixel ratio of 3 (e.g. iPhone 12).
As suggested by other answers, using Stylesheet.hairlineWidth fixes the random width issue but the problem was that the width was thinner than 0.5 on devices with pixel ratio of 3.
So this fixed my problem:
import { PixelRatio, View } from 'react-native';
...
export const Divider = () => {
const width = PixelRatio.roundToNearestPixel(0.5);
...
return <View style={{ width }} ... />
}