I am not sure if the heading is accurate but I want to implement something like this in react-native
Notice how it automatically scrolls for a while when the user scrolls quickly from right to left.
This is what I have
This is how my code looks like
<ScrollView
style={{ ...styles.scrollView }}
horizontal={true}
contentContainerStyle={styles.scrollViewContainer}
showsHorizontalScrollIndicator={false}>
{profileData.map((profile, index) => {
return (
<TouchableWithoutFeedback
key={`${index}Profile`}
onPress={() => setActive(index)}>
<View style={styles.imageCircle}>
<ImageCircle uri={profile.path} active={index === active} />
</View>
</TouchableWithoutFeedback>
);
})}
</ScrollView>
Any idea how I can fix it/apply it in my component? Below are the relevant styles.
import { StyleSheet, Dimensions } from 'react-native';
const { width } = Dimensions.get('window');
const styles = StyleSheet.create({
scrollView: {
height: 100,
},
scrollViewContainer: {
paddingHorizontal: width * 0.5 - width * 0.1,
},
imageCircle: {
width: width * 0.2,
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
},
});
export default styles;
Related
I have been trying to update my screen dimensions in react native so that the component resizes on-screen rotation with no vain. I have created my style in a separate file (Styles.js) and imported the styles in my login page like below:
Styles.js
import {
StyleSheet,
Dimensions
} from "react-native";
import {
scale,
ScaledSheet
} from "react-native-size-matters";
const styles = ScaledSheet.create({
scrollViewContainer: {
backgroundColor: '#E20030',
alignItems: 'center',
height: Dimensions.get('window').height,
padding: '50#s'
},
container2: {
alignItems: 'center',
justifyContent: 'center',
width: Dimensions.get('window').width,
flex: 1,
},
loginRect: {
borderRadius: '30#s',
marginTop: '20#s',
width: Dimensions.get('window').width * 0.8,
backgroundColor: 'white',
alignItems: 'center'
},
SectionStyle: {
flexDirection: 'row',
marginTop: 0,
marginLeft: '35#s',
marginRight: '35#s',
borderWidth: '1#s',
borderRadius: '5#s',
borderColor: '#dadae8',
},
});
Login.js
import React, { } from 'react';
import {
Text, View, TextInput, TouchableOpacity,
KeyboardAvoidingView,
} from 'react-native';
import { mystyles, styles } from './Components/styles';
const LoginScreen = () => {
return (
<View style={mystyles.scrollViewContainer}>
<KeyboardAvoidingView behavior="padding" style={{ flex: 100 }}>
<View style={mystyles.scrollViewContainer}>
<View style={mystyles.loginRect}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, marginLeft: 45, marginTop: 20 }}>
<Text style={{ color: 'black' }}>Username</Text>
</View>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
/>
</View>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, marginLeft: 45, marginTop: 20 }}>
<Text style={{ color: 'black' }}>Password</Text>
</View>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
/>
</View>
<TouchableOpacity>
<Text style={styles.buttonTextStyle}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
</View>
)
}
export default LoginScreen;
So I have tried using Dimensions onchange listener in my Styles.js but I get an error
ERROR Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
I created this function in the Styles.js file
m
function getDimensions() {
const [dimensions, setDimensions] = useState({
window,
screen
});
useEffect(() => {
const subscription = Dimensions.addEventListener(
"change",
({
window,
screen
}) => {
setDimensions({
window,
screen
});
console.log(dimensions.window.height + " +++ " + dimensions.screen)
}
);
// return () => subscription?.remove();
});
return dimensions.window;
}
Is there any way I can update the component sizes once the screen has been rotated?
This is working for me to detect rotation or changes in the size of the screen (split mode in tablets for example) without eventListeners.
import { Dimensions } from "react-native";
...
useEffect(() => {
...
}, [Dimensions.get("screen").height, Dimensions.get("screen").width]);
Hope this help to anybody
How to make the Header and Footer stay in place while the content (in the middle of screen is being scrolled)?
I have tried to do it using 'flex' property with no avail thus far.
The example code:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { FlatList } from "react-native-web";
export default function App() {
const items = [];
for (let i = 1; i <= 200; i++) {
items.push(`Item number ${i}`);
}
return (
<View style={styles.container}>
<View>
<Text>HEADER VALUE</Text>
</View>
<FlatList
data={items}
keyExtractor={item => item}
renderItem={({item}) => <Text>{item}</Text>}/>
<View>
<Text>FOOTER VALUE</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Expo Snack of this code:https://snack.expo.io/NAoplIFmA
The current behavior is that the header is gets scrolled away as if the entire screen was surrounded with the scroll view. But the screen is surrounded with regular view so I would have expected the FlatList to be scrollable while the Header stays in place.
What is the proper way to make the header/footer stay in place while the contents of FlatList become scrollable?
You can use the position: "fixed"
Here you go, this should solve it.. Make changes according to your needs.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { FlatList } from "react-native-web";
export default function App() {
const items = [];
for (let i = 1; i <= 200; i++) {
items.push(`Item number ${i}`);
}
return (
<View style={styles.container}>
<View style = {styles.header}>
<Text style = {{textAlign:'center'}}>HEADER VALUE</Text>
</View>
<FlatList
data={items}
keyExtractor={item => item}
renderItem={({item}) => <Text>{item}</Text>}/>
<View style = {styles.footer}>
<Text>FOOTER VALUE</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
header:
{
position:"fixed",
top:0,
left:0,
alignItems:'center',
justifyContent:'center',
width:'100%',
backgroundColor:'blue',
height:'50px'
},
footer:
{
position:"fixed",
bottom:0,
left:0,
alignItems:'center',
justifyContent:'center',
width:'100%',
backgroundColor:'blue',
height:'50px'
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginTop:'50px'
},
});
I am trying to create 6 customized button (3 buttons in each row) using TouchableOpacity. I was able to add the 3 buttons in the first row but when try to add the other three buttons in the next row, for some reason it pushes the the first row up. I want the gap/height between each rows to be at most 10px.
and my other question is, when I try to wrap the customized card with TouchableOpacity, it ignores the width I specify on the StyleSheet.
I am new to react native. So, if this is dumb question to ask, I apologize.
Here is the code I have,
//Card component
import React from "react";
import { StyleSheet, View, TouchableOpacity } from "react-native";
function Card(props) {
return (
<View style={{ ...styles.CardSytle, ...props.style }}>
{props.children}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
CardSytle: {
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
elevation: 10,
backgroundColor: "white",
padding: 20,
borderRadius: 10,
marginHorizontal: 10,
marginVertical: 10,
},
});
export default Card;
//MainPage
import React from "react";
import { View, StyleSheet, Dimensions } from "react-native";
import Card from "../components/Card";
const MainPageScreen = (props) => {
return (
<View style={styles.body}>
<View style={styles.cardContainer}>
<Card style={styles.card} />
<Card style={styles.card} />
<Card style={styles.card} />
</View>
<View style={styles.cardContainer}>
<Card style={styles.card} />
<Card style={styles.card} />
<Card style={styles.card} />
</View>
</View>
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
backgroundColor: "white",
},
cardContainer: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
card: {
width: Dimensions.get("window").width / 3,
maxWidth: "28%",
height: 150,
maxHeight: "28%",
},
});
export default MainPageScreen;
//Here is screenshot of the buttons
[1]: https://i.stack.imgur.com/9z84U.png
You are setting a maxHeight of 28% which is setting the button height to 28% of parent and creates a blank space under the row. So you should remove it.
card: {
width: Dimensions.get('window').width / 3,
maxWidth: '28%',
height: 150,
},
As for the touchable opacity, Rather than wrapping the view you can use it as the main wrapper and style it Like below.
function Card(props) {
return (
<TouchableOpacity style={[styles.CardSytle, props.style]}>
{props.children}
</TouchableOpacity>
);
}
I am trying to create a scroll view in react native.
I gave full-device-width and height for the scroll-view.
width is working but height is not working so the app is showing only on down part of the emulator,
I would like to know how can I make this showing up in fullscreen and also why this error occurring.
this is how it's loading on emulator.
you can find my react-native code below
import React, { Component } from 'react';
// import Counterpart from './Counterpart'
import contacts from './contacts'
import {
View,
Button,
ScrollView,
Switch,
Text,
Input,
StyleSheet,
Dimensions,
} from 'react-native';
const widthfull = Dimensions.get('window').width; //full width
const heightfull = Dimensions.get('window').height; //full height
const styles = StyleSheet.create({
mainwrap: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
zIndex:1,
},
countfont: {
fontSize: 120,
},
marginfromtop: {
display: 'flex',
flex: 1,
paddingTop: 50,
},
ScrollViewstles: {
display: 'flex',
flex: 1,
margin:0,
padding:0,
zIndex:2,
width:widthfull,
height:heightfull,
paddingLeft:30
}
});
export default class App extends Component {
state = {
showCounter: true
}
toggglecounter = () => {
this.setState(() => ({showCounter: !this.state.showCounter}))
}
render() {
if (this.state.showCounter) {
return (
<View style={styles.mainwrap}>
<View style={[styles.marginfromtop, styles.countfont]}>
<Button
style={{ marginTop: 50 }}
onPress={this.toggglecounter}
title="Toggle Contacts"
/>
</View>
<View style={styles.mainwrap}>
<ScrollView style={styles.ScrollViewstles}>
{contacts.map(c => (
<Text key={c.key}>{c.name}</Text>
))}
</ScrollView>
</View>
</View>
);
} else {
return (
<View style={[styles.marginfromtop, styles.countfont]}>
<Button
style={{ marginTop: 50 }}
onPress={this.toggglecounter}
title="Toggle Contacts"
/>
</View>
);
}
}
}
remove flex: 1 from marginfromtop
marginfromtop: {
paddingTop: 50,
},
Please have a look this image
I have an issue in the animation of the circle.
The flow is:
When user will click on button 1, the circle will animate from real position to position 1,
When clicking button2, a circle will move from position 1 to position 2,
and
When clicking on button2, a circle will animate back on the real position.
I need 1 sec. time while animate and I want to set circle position at particular Y position.
mean the first position on Y=400, second position on Y= 100.
Thanks in advance
You need to use the Animated library from react-native. Check out the library for more details on how to animate objects.
Meanwhile check the working example in Snack.io
Here's the code.
import React, { Component } from "react";
import { View, Text, StyleSheet, Animated, TouchableOpacity } from "react-native";
export default class App extends Component {
constructor() {
super();
this.state = {
posY: new Animated.Value(400)
};
}
moveBall = (yPos) => {
Animated.timing(this.state.posY, {
toValue: yPos,
duration: 1000
}).start()
};
renderRectangle = () => {
const animatedStyle = { top: this.state.posY };
return (
<Animated.View style={[styles.rectangle, animatedStyle]}>
</Animated.View>
);
};
render() {
return (
<View style={styles.container}>
<View style={{ flex: 0.9, alignItems: 'center' }}>
{this.renderRectangle()}
</View>
<View style={styles.buttonsContainer}>
<TouchableOpacity
style={styles.buttonStyle}
onPress={() => this.moveBall(250)}
>
<Text>Button 1</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.buttonStyle}
onPress={() => this.moveBall(100)}
>
<Text>Button 2</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.buttonStyle}
onPress={() => this.moveBall(400)}
>
<Text>Button 3</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
rectangle: {
backgroundColor: "#2c3e50",
width: 50,
height: 50,
borderRadius: 50,
position: 'absolute'
},
buttonsContainer: {
flex: 0.1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 20,
paddingRight: 20
},
buttonStyle: {
padding: 5,
height: 30,
backgroundColor: 'limegreen'
}
});