I am new in the react native ecosystem. I am developing a react native app with expo and I see some things weirds.
My simple code is:
export function Practical({ navigation }: any): JSX.Element {
return (
<View>
<View style={styles.primro}>
<View style={styles.ultimo}>
<Text>Hola</Text>
</View>
</View>
</View>
);
}
const yellow = 'yellow';
const purple = 'purple';
const styles = StyleSheet.create({
primro: {
backgroundColor: yellow,
height: '141px',
width: '341px',
},
ultimo: {
backgroundColor: purple,
height: '100px',
width: '200px',
},
});
I am seeing this in web:
I see this in ios:
And this is what I see in chrome with the iphone view, and I would expect to see in the xcode simulator:
Thanks!!
I tried with several structures.
Related
I'm trying to create an effect in my React Native app whereby a pixelated version of an image grows in height over another image. I'm using react-native-reanimated v2. The issue I'm having is that I can't get the image to animate in height without the image scaling/re-positioning.
To illustrate the effect I'm currently getting, and what I want, see this image:
I've tried different resizeMethod inputs and the closest I've found is repeat however this performs inconsistently over different device sizes. Ideally I'd just want the image to not scale but that's likely just ignorance on my side in terms of understanding the way images are rendered.
Current code:
const AnimatedDemo = () => {
const overlayPicHeight = useSharedValue(0);
useEffect(() => {
overlayPicHeight.value = withTiming(100, {
duration: 5000,
});
}, []);
const animatedHeight = useAnimatedStyle(() => ({
height: `${overlayPicHeight.value}%`,
}));
return (
<View style={styles.container}>
<Animated.Image
source={require("./dog2.jpeg")}
style={[{ width: "100%", height: "100%" }]}
/>
<Animated.Image
source={require("./dog2-pixel.jpeg")}
style={[
{ width: "100%", position: "absolute", zIndex: 1 },
animatedHeight,
]}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
height: "90%",
alignItems: "center",
},
});
Note - if I can achieve the same kind of effect without needing to use the 2nd , I'm all ears, as this would likely resolve my issue too
I am using react native snap carousel and I am trying to have the preview of the next card look the same height as the current card. Originally the preview is set to look centered but smaller. I would like the preview to look the same exact size.
I tried setting the containerCustomStyle to alignItems center which made it look closer to the result I wanted but the sizes are not the same. If you remove the contrainerCustomStyle you can see an exaggerated version of what I do NOT want.
I have a snack expo recreating my problem here as well as some code below. If I need to add a picture to clarify the result I would like, let me know!
I appreciate any insight at all more than you know.
renderCarouselItem = ({ item }) => {
return <View style={styles.cardContainer}>
<Text style={styles.name}>{item.name}</Text>
</View>;
};
render() {
return (
<Carousel
ref={(c) => {
this._carousel = c;
}}
data={this.state.coordinates}
renderItem={this.renderCarouselItem}
containerCustomStyle={styles.carousel}
sliderWidth={Dimensions.get('window').width}
itemWidth={300}
removeClippedSubviews={false}
/>
);
}
}
const styles = StyleSheet.create({
cardContainer: {
backgroundColor: 'red',
height: 100,
width: 300,
borderRadius: 10,
},
name: {
color: 'black',
fontSize: 22,
},
carousel: {
alignItems: 'center',
}
});
react-native-snap-carousel is deprecated. You should try react-native-reanimated-carousel
Below is the basic code for Responsive layout using npm package(react-native-responsive-screen). This is working fine as expected in Class component. But, I want to change the below code to Functional component. I have almost changed everything. Initially no error when i load the app in portrait/landscape mode. Once i change it to landscape/portrait, it will come up with some error.
Here is the link of Original source. https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-orientation-change/README.md
import React, { useEffect, useState } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { Container, View, Button, Text} from "native-base";
import {widthPercentageToDP as wp,
heightPercentageToDP as hp,
listenOrientationChange as lor,
removeOrientationListener as rol } from 'react-native-responsive-screen';
const Responsive = () =>
{
useEffect( () =>
{
lor();
return () => rol()
},[])
const styles = StyleSheet.create({
container: { flex: 1, alignItems: 'center', justifyContent:'center' },
title: {
backgroundColor: 'gray',
height: hp('10%'),
width: wp('80%'),
alignItems: 'center',
justifyContent:'center',
marginVertical: wp('10%'),
},
myText: {
textAlign:'center',
color:'white',
fontSize: hp('5%') // End result looks like the provided UI mockup
},
buttonStyle:
{
height: hp('8%'), // 70% of height device screen
width: wp('30%'),
marginHorizontal: wp('10%'),
},
buttonContainer:
{
flexDirection:'row',
marginBottom: wp('10%'),
},
paraContainer:
{
width: wp('80%'),
},
paraText:
{
textAlign:'justify'
}
});
return (
<Container>
<View style={styles.container}>
<View style={styles.title}>
<Text style={styles.myText}>Screen title with 50% width</Text>
</View>
<View style={styles.buttonContainer}>
<Button success style={styles.buttonStyle}><Text>Button 1</Text></Button>
<Button success style={styles.buttonStyle}><Text>Button 2</Text></Button>
</View>
<View style={styles.paraContainer}>
<Text style={styles.paraText}>
As mentioned in "How to Develop Responsive UIs with React Native" article, this solution is
already in production apps and is tested with a set of Android, iOS emulators of different
screen
specs, in order to verify that we always have the same end result.
</Text>
</View>
</View>
</Container>
);
}
export default Responsive;
Thanks in Advance.
It is not due to your code, it is due to library limitation. Current version of library still does not support functional components.
There is an open issue and PR regarding that open
issue: https://github.com/marudy/react-native-responsive-screen/issues/82
PR: https://github.com/marudy/react-native-responsive-screen/pull/70
If you still want to continue with this library, just use the head of that PR in your package.json and it should work.
"react-native-responsive-screen": "marudy/react-native-responsive-screen#70/head",
Make sure to delete node_module and perform yarn or npm install
I'm using a WebView to show an iframe of a twitch-stream in my react-native app, however at some points when it renders the WebView only shows up as a blank white screen until you scroll/move the UI and at other times it works as intended.
There are no errors emitted when the WebView is blank, it seems to load as intended so not really sure why it just shows a blank white screen.
Here is the WebView code:
<Animated.View
style={{
height: anim,
width: width,
overflow: 'hidden',
}}
>
<WebView
onLoadEnd={() => {
useAnimation()
}}
source={{
uri: `https://host.com/iframe/?channel=${channelName}`,
}}
style={{
height: heightByRatio,
width: width,
flex: 0,
}}
mediaPlaybackRequiresUserAction={false}
allowsInlineMediaPlayback={true}
/>
</Animated.View>
I had a very similar issue of webviews sometimes loading blank on android devices. I can't say I figured out why it was happening, but I solved it by delaying the load of the webview and putting a 2px border around the container wrapping the webview. Neither solution worked on its own, both were needed.
export default class WebviewExample extends Component<Props> {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
setTimeout(() => {
this.setState({loadWebview: true});
});
}
render() {
return (
<View style={styles.view}>
{this.state.loadWebview &&
<WebView />
}
</View>
);
}
}
const styles = StyleSheet.create({
view: {
borderWidth: 2,
borderColor: 'transparent',
}
});
I Am New To React Native And I am Facing A Issue With Responsive Image. This Code is working fine on my phone But when I try it on another phone The Image Gets Cropped In The Sides.
I Tried The Following solutions
Responsive image in React Native
React Native responsive image width while width/height ratio of image keeps the same
This is The Complete Code https://snack.expo.io/SuHBzDnNi
return(
<SafeAreaView style={styles.container}>
<TouchableOpacity style={styles.Touch} onPress={this.MoveNextPage}>
<Image resizeMode="contain" source={require("../logo.png")} style={styles.logo}/>
</TouchableOpacity>
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
height:Dev_Height,
width:Dev_Width,
justifyContent:"center",
alignItems:"center",
backgroundColor:"#121212"
},
logo:{
height:"100%",
width:"100%"
},
Touch:{
justifyContent:"center",
alignItems:"center",
height:"22%",
width:"40%"
}
})
Thank You : )