We Keep Coding

React Native ScrollView fetch data from page

I am making an application, which brings wordpress data, more specifically I export post from a news page.
When I bring the list of posts, everything is fine, but when I put the ScrollView on it so that the screen can scroll. the screen returns to the original position.
I do not know if I explain myself well, but when I try to slide the screen down, the screen returns up
This is my code
...
{({loading, error, data}) => {
if (loading){
return(
<View style={styles.container}>
<Text>loading...</Text>
</View>
)
}
console.log(data);
return (
<View style={styles.container}>
<ScrollView>
{data.posts.edges.map((post, key) => {
return(
<View style={styles.vcontainer} key={key}>
<TouchableOpacity onPress={() => {
navigation.navigate('Post', {id: post.node.id});
}}>
<Image style={styles.postimg} source={require('../../img/imgnotfound.jpeg')} resizeMode = 'cover'/>
<Text style={styles.title}>{post.node.title}</Text>
</TouchableOpacity>
</View>
)
}
)}
</ScrollView>
</View>
)
}}
</Query>
...
this is a short video of my case: https://drive.google.com/file/d/1oc0yYTbhQkz0lrRgNon_vNrUM1U8lZ3W/view?usp=sharing
my styles code:
const styles = StyleSheet.create({
container:
{
flex: 1,
padding:20
},
postimg:
{
width: '100%',
height: '20%',
borderRadius: 20,
marginBottom: '1%'
},
titulo:
{
fontSize: 18,
fontWeight: 'bold',
marginBottom: '1%',
}
})

Passing style to my custom component is not working in react native. (styles are not attached to my custom component)

I am new to react native.
I created some custom components in project. And I pass some style to them via the props but my passing styles are not attached to that components. At the first it was working correctly but suddenly I don't know what happened that my passing styles are not working.
Here is my code:
This the page where I used my custom component and passed style to that.
function StartGameScreen(props) {
const [confirmed, setConfirmed] = useState(false);
const [selectedNumber, setSelectedNumber] = useState();
const numInputHandler = (inputText) => {
setEneteredValue(inputText.replace(/[^0-9]/g, ""));
};
const confirmInput = () => {
const chosenNumber = parseInt(enteredValue);
if (isNaN(chosenNumber) || chosenNumber <= 0 || chosenNumber > 99) {
Alert.alert(
"Invalid number!",
"Number has to be a number between 0 and 99.",
[{ text: "Okay", style: "destructive", onPress: resetInput }]
);
return;
}
setConfirmed(true);
setSelectedNumber(chosenNumber);
setEneteredValue("");
Keyboard.dismiss();
};
let confirmedOutput;
if (confirmed) {
confirmedOutput = (
<Card style={styles.summeryContainer}>
<Text>You selected</Text>
<NumberContainer>{selectedNumber}</NumberContainer>
<Button
title="START GAME"
onPress={() => {
console.log("hello" + selectedNumber);
props.onStartGame(selectedNumber);
}}
/>
</Card>
);
}
return (
<TouchableWithoutFeedback
onPress={() => {
Keyboard.dismiss();
}}
>
<View style={styles.container}>
<Text style={styles.title}>Start A New Game!</Text>
*This is where I used my custom component (<Card>).*
<Card style={styles.inputContainer}>
<Text>select a number</Text>
<Input
style={styles.input}
blurOnSubmit
autoCapatilize="none"
autoCorrect={false}
keyboardType="number-pad"
maxLength={2}
onChangeText={numInputHandler}
value={enteredValue}
/>
<View style={styles.buttonCon}>
<View style={styles.button}>
<Button
title="Reset"
color={Colors.accent}
onPress={resetInput}
/>
</View>
<View style={styles.button}>
<Button
title="Confirm"
color={Colors.primary}
onPress={confirmInput}
/>
</View>
</View>
</Card>
{confirmedOutput}
</View>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
alignItems: "center",
},
inputContainer: {
width: 300,
maxWidth: "80%",
alignItems: "center",
},
input: {
textAlign: "center",
width: 50,
},
});
export default StartGameScreen;
And this is my Card custom component:
function Card(props) {
return (
<View style={{ ...styles.container, ...props.style }}>
{props.children}
</View>
);
}
const styles = StyleSheet.create({
container: {
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 12,
backgroundColor: "white",
padding: 20,
borderRadius: 10,
},
});
export default Card;

Change Your Card component like below then it will work
function Card(props) {
return (
<View style={[styles.container,props.style]}>
{props.children}
</View>
);
}

React Native, how to remove old style and add new

I want remove old style (Hidden) on View and set new style (InputContainer) when onPress is called.
This source adds new style, but how do I remove old style?
showNext = (id) => {
this.refs["block-" + id].setNativeProps({
style: styles.Hidden
});
id++;
this.refs["block-" + id].setNativeProps({
style: styles.InputContainer
});
}
render() {
return (
<KeyboardAvoidingView style={[styles.Container]}>
<View style={styles.InputContainer} id="block-1" ref="block-1">
<Text>Block 1</Text>
<DefaultButton onPress={() => this.showNext(1)}>Ok</DefaultButton>
</View>
<View style={styles.Hidden} id="block-2" ref="block-2">
<Text>Block 2</Text>
</View>
</KeyboardAvoidingView>
)
}
styles
const styles = StyleSheet.create({
Container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
Hidden: {
display: "none"
},
InputContainer: {
width: "80%"
}
});

I think you could do something simpler
state = {
pressed: false
}
showNext = () => {
this.setState({pressed: !this.state.pressed})
}
render() {
return (
<KeyboardAvoidingView style={[styles.Container]}>
<View style={this.state.pressed ? styles.InputContainer : styles.Hidden} id="block-1" ref="block-1">
<Text>Block 1</Text>
<DefaultButton onPress={showNext}>Ok</DefaultButton>
</View>
<View style={styles.Hidden} id="block-2" ref="block-2">
<Text>Block 2</Text>
</View>
</KeyboardAvoidingView>
)
}
it should also work dynamically:
showNext = (id) => {
this.setState({[`blockPressed-${id}`]: !this.state[`blockPressed-${id}`]})
}
and
<View style={this.state.blockPressed-1 ? stlyes.InputContainer : styles.Hidden}>
<Text>Block 1</Text>
<DefaultButton onPress={() => showNext(1)}>Ok</DefaultButton>
</View>

How to make this grid with logo header at the top?

I am a newbie to react native, I want to make this layout possible I have following code but it puts the logo inside grid
What I am looking for is this
import React, { Component } from 'react';
import GridView from 'react-native-super-grid';
export default class ProfileScreen extends Component {
static navigationOptions = {
title: 'Details',
};
render() {
const { navigate } = this.props.navigation;
const items = [
{ name: require('./images/shopping-cart.png'),code: '#2ecc71' }, { name: require('./images/home.png'), code: '#2ecc71' },
{ name: require('./images/money-bag.png'), code: '#2ecc71' }, { name: require('./images/alert.png'), code: '#2ecc71' }
];
return (
<ImageBackground
source={require('./images/marble.jpg')}
style={styles.backgroundImage}>
<View style={styles.mainLayout}>
<Image resizeMode={'cover'} style = {styles.logoFit} source={require('./images/Logo1.png')}/>
<GridView
itemDimension={130}
items={items}
style={styles.gridView}
renderItem={item => (
<View style={styles.itemContainer}>
<View style={styles.CircleShapeView}>
<Image style={styles.iconItem} source={item.name}/>
</View>
</View>
)}
/>
</View>
</ImageBackground>
);
}
}
const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.width * 9 / 16);
const imageWidth = dimensions.width;
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
},
CircleShapeView: {
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: '#00BCD4',
justifyContent: 'center',
alignItems: 'center'
},
gridView: {
paddingTop: 50,
flex: 1,
},
itemContainer: {
justifyContent: 'center',
alignItems:'center',
height:130
},
iconItem: {
alignItems:'center',
justifyContent: 'center'
},
logoFit: {
width: imageHeight,
height: imageWidth
},
mainLayout: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}
});

Get rid of that grid component. You don't need it for such a simple thing. It's complicating things, and as it's not a regular/common component we don't know how it's affecting things.
This looks quite simple:
<View>
<View style={{}}>
<Image />
</View>
<View style={{flexDirection:'row'}}>
<View>
<Text>row 1, col 1</Text>
</View>
<View>
<Text>row 1, col2Text>
</View>
</View>
<View style={{flexDirection:'row'}}>
<View>
<Text>row 2, col 1</Text>
</View>
<View>
<Text>row 2, col2Text>
</View>
</View>
<View style={{}}>
<Button title="Login" />
</View>
</View>
Here's another similar question - How to create 3x3 grid menu in react native without 3rd party lib?

Inside navigationOptions You should remove the title property and define a header property and put your Image there. Like this
static navigationOptions = {
header:(<Image resizeMode={'cover'} style = {styles.logoFit} source={require('./images/Logo1.png')}/>)
};
Or... YOu can just make the header null as
static navigationOptions = {
header:null
};
and your current code would work as you want it to be.

How to create TextInputs in one row? (React Native)

I'm trying to create 3 TextInputs in one row, but when I write flexDirection: 'row' it doesn't work (I don't see any text inputs on device).
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.textInputWrapper}>
<TextInput style={styles.textInput}
placeholder='Month'
placeholderTextColor="#d3d3d3"
/>
</View>
<View style={styles.textInputWrapper}>
<TextInput style={styles.textInput}
placeholder='Day'
placeholderTextColor="#d3d3d3"
/>
</View>
<View style={styles.textInputWrapper}>
<TextInput style={styles.textInput}
placeholder='Year'
placeholderTextColor="#d3d3d3"
/>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row'
}
});

You need to add styles for each component. Hope that help.
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row'
},
textInputWrapper: {
flex:1,
height: 50,
borderColor:'red',
borderWidth: 2,
},
textInput:{
flex:1,
}
});