We Keep Coding

FlatList Horizontal Scrolling

I'm creating onBoarding screens and I have created each of the screen item as a component and trying to render them with Flatlist so far everything is working smoothly but when I swipe the flatlist to see the other screens it's not working it swipes 40% and and forcefully shows the current screen it seems like there is some flex styling issues and I could able to figure it out please suggest.
Here is the video for explaination: https://youtube.com/shorts/pHbTs7ifMww
OnBoardingScreen.js
import React, { useState } from 'react';
import { Dimensions, FlatList, SafeAreaView, View, StyleSheet, Text, Image } from 'react-native';
const { width, height } = Dimensions.get('window');
const COLORS = {primary : '#ff006c', white: '#ffffff', black: '#000000'};
const slides = [
{
id: '1',
image: require('../../images/OnBoardingImages/1.png'),
title: 'You can mark time',
description: 'Lorem ipsum is a placeholder text commonly used to demonstrate the visual',
},
{
id: '2',
image: require('../../images/OnBoardingImages/2.png'),
title: 'You can mark time',
description: 'Lorem ipsum is a placeholder text commonly used to demonstrate the visual',
},
{
id: '3',
image: require('../../images/OnBoardingImages/3.png'),
title: 'You can mark time',
description: 'Lorem ipsum is a placeholder text commonly used to demonstrate the visual',
},
]
const Slide = ({item}) => {
return (
<View style={styles.slideView}>
<Image source={item.image} style={styles.slideImage} />
<Text style={styles.slideTitle}>{item.title}</Text>
<Text style={styles.slideDescription}>{item.description}</Text>
</View>
);
}
const OnBoardingScreen = ({ navigation }) => {
const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
const Footer = () => {
return (
<View style={styles.footer}>
<View style={styles.pagination}>
{slides.map((_, index) => (<View key={index} style={[styles.paginationItem, currentSlideIndex == index && {backgroundColor: 'grey'} ]} /> ))}
</View>
</View>
);
};
return (
<SafeAreaView style={styles.root}>
<FlatList
data={slides}
contentContainerStyle={{flex: 1}}
showsHorizontalScrollIndicator={false}
horizontal
pagingEnabled
renderItem={({item}) => <Slide item={item} />} />
<Footer />
</SafeAreaView>
);
};
export default OnBoardingScreen;
const styles = StyleSheet.create({
root: {
flex: 1,
backgroundColor: COLORS.white,
},
slideView: {
alignItems: 'center',
},
slideImage: {
height: '75%',
width: width,
resizeMode: 'contain',
},
slideTitle: {
color: COLORS.primary,
fontSize: '22',
fontWeight: 'bold',
marginVertical: 10,
paddingHorizontal: 10,
textAlign: 'center',
},
slideDescription: {
fontSize: 18,
paddingHorizontal: 20,
color: 'grey',
textAlign: 'center',
},
footer: {
height: height * 0.25,
paddingHorizontal: 20,
justifyContent: 'space-between',
},
pagination: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: 20,
},
paginationItem: {
height: 10,
width: 10,
backgroundColor: COLORS.primary,
marginHorizontal: 3,
borderRadius: 50,
},
});
App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Navigation from './src/navigation';
export default function App() {
return (
<View style={styles.container}>
<Navigation />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});

Update this style
slideView: {
alignItems: 'center',
width: width
},

Redirect link to new page with React Native

I'm learning React Native and need help from the React Native experts out there! Does anyone know how to redirect a link to new page(component).
I have a list of items (Purchases, Settings, Polices, Customer Support) that I want to redirect them to a new page when I click on it. Do I need to use the onPress event or is there another way?
import React, { component} from 'react';
import {Component} from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import Login from './LogIn';
class Profile extends Component{
state = {
names: [
{
id: 0,
name: 'Purchases',
},
{
id: 1,
name: 'Settings',
},
{
id: 2,
name: 'Policies',
},
{
id: 3,
name: 'Feedback',
},
{
id: 3,
name: 'Customer support',
},
{
id: 3,
name: 'About the app',
}
]
}
render(){
return(
<View style={styles.container}>
<Text style={styles.header}>Welcome to GOLDENSHOE</Text>
<Text style={{fontSize: 16}}>Sign up or log in to access special discounts, your favorites and your account </Text>
<Login />
<View>
{
this.state.names.map((item, index) => (
<TouchableOpacity
key = {item.id}
style = {styles.listCont}
onPress = {() => console.log('hello')}>
<Text style = {styles.text}>
{item.name}
</Text>
</TouchableOpacity>
))
}
</View>
<View style={{marginRight: 50}}>
<Text style={{marginTop: 40, textAlign:"right",fontWeight: "bold"}}>STAY IN TOUCH</Text>
<TextInput style={{textAlign:"right", marginTop: 10, borderColor: 'black'}}placeholder="Sign up for GOLDENSHOE news" type="text" />
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
marginLeft: 10
},
header: {
fontWeight: 'bold',
marginTop: 40,
marginBottom: 30,
color: "lightgreen",
fontSize: 30,
},
button: {
alignItems: 'flex-start',
marginTop: 30,
flexDirection: 'column',
borderBottomColor: "black",
borderBottomWidth: 1,
borderTopColor: "black",
borderTopWidth: 1,
},
listCont: {
padding: 10,
marginTop: 3,
borderBottomWidth: 1
},
login: {
borderRadius: 10
}
})
export default Profile;

underline the clicked text element

I have a list of text elements that I want to underline when clicked. If I add the text decoration to the tabText then obviously it is applied to all items. How can I make sure that the when I click on another tab, the underline from the previous tab gets removed?
Is there any way I can add or remove items from the style element upon clicking on an item?
//onPress={() => {}}>
const tabs = [
{
id: 1,
text: 'Alle List',
},
{
id: 2,
text: 'Second',
},
];
export const Tab: React.FunctionComponent = () => {
return (
<View style={styles.tabView}>
{tabs.map((item: any) => (
<View>
<Text style={styles.tabText}>{item.text}</Text>
</View>
))}
</View>
);
};
const styles = StyleSheet.create({
tabView: {
paddingTop: moderateScale(15),
paddingLeft: moderateScale(20),
paddingRight: moderateScale(20),
flexDirection: 'row',
justifyContent: 'space-between',
},
tabText: {
color: 'white',
paddingBottom: moderateScale(10),
//textDecorationLine: 'underline'
},
});
Codesandbox (with tabText items as an array too):
https://snack.expo.io/#nhammad/shallow-watermelon

You can use useState to save the selected index and then apply another style based on the selected index. Here is a quick modification to your script and the snack link is at the end.
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
const tabs = [
{
id: 1,
text: 'All Friends',
},
{
id: 2,
text: 'Second',
},
{
id: 3,
text: 'Third',
},
];
export default function App() {
const [selected, setSelected] = React.useState(null)
return (
<View style={styles.container}>
<View style={styles.tabView}>
{tabs.map((item: any, index) => (
<TouchableOpacity onPress={()=>setSelected(index)}>
<View>
<Text style={[styles.tabText,selected===index?styles.selected:null]}>{item.text}</Text>
</View>
</TouchableOpacity>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
tabView: {
paddingTop: 15,
paddingLeft: 20,
paddingRight: 20,
flexDirection: 'row',
justifyContent: 'space-between',
},
tabText: {
color: 'black',
paddingBottom: 10,
},
selected: {
textDecorationLine: 'underline'
},
});
https://snack.expo.io/#saachitech/da6280

You can add different styles for your tab depending on active route
<Text style={[(this.props.activeRouteName == route.routeName) ? styles.tabActiveText: styles.tabText]}>{item.text}</Text>
And then in the styles
tabActiveText: {
color: 'white',
paddingBottom: moderateScale(10),
textDecorationLine: 'underline'
}

How can I make a touchable opacity when another touchableopacity is clicked and set the text in it to the value entered in a text input

I'm a 13-year-old beginner to react native, and I need help with the problem in the title.
I need to do that all on a touchable opacity click. I have tried searching for other solutions on google but found nothing.
It's actually a tutorial on Youtube.
Here is the link: Tutorial
Please help me.
Thank you.
import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, TouchableOpacity } from 'react-native';
import Header from './components/header';
import TodoItem from './components/todoItem';
export default function App() {
const [todos, setTodos] = useState([
{ text: 'turn on laptop', key: '1'},
{ text: 'create an app', key: '2'},
{ text: 'play on the switch', key: '3'}
]);
const addToDo = () => {
}
const PressHandler = (key) => {
setTodos((prevTodos) => {
return prevTodos.filter(todo => todo.key != key);
});
}
return (
<View style={styles.container}>
<Header />
<View style={styles.content}>
{/* todo form */}
<View style={styles.list}>
<FlatList
data={todos}
renderItem={({ item }) => (
<TodoItem item={item} PressHandler={PressHandler}/>
)}
/>
</View>
</View>
<TextInput style={styles.todoInput} maxLength={20} onChange={() => this.setState} />
<TouchableOpacity style={styles.submitTodo} onPress={addToDo}>
<Text style={styles.submitTodoText}>Done</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
content: {
padding: 40,
},
todoInput: {
position: "absolute",
bottom: 1,
},
todoInput: {
height: 31,
borderColor: "coral",
borderStyle: "dashed",
borderWidth: 1,
borderRadius: 10,
position: "absolute",
bottom: 26,
width: "73%",
textAlign: "center",
marginLeft: 25,
},
submitTodo: {
padding: 10,
width: "15%",
position: "absolute",
right: 15,
bottom: 26,
backgroundColor: "coral",
borderRadius: 10,
alignItems: "center",
},
submitTodoText: {
color: "#fff",
fontSize: 10,
}
});
Again Thank you, for spending time on this.

View display is not what I expect when using react-native

I'm reading Learning React Native by Bonnie Eisenman and am having trouble with the WeatherProject tutorial in chapter 3. When the app loads in the iOS simulator, it appears to be rendering the contents of Forecast.js but taking up the whole display without anything from WeatherProject.js
Here is my code:
index.ios.js
import {
AppRegistry,
} from 'react-native';
import WeatherProject from './WeatherProject';
AppRegistry.registerComponent('WeatherProject', () => WeatherProject);
WeatherProject.js
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
} from 'react-native';
var Forecast = require('./Forecast');
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#4D4D4D'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
},
input: {
fontSize: 20,
borderWidth: 2,
height: 40
}
});
var WeatherProject = React.createClass({
getInitialState() {
return {
zip: '',
forecast: {
main: 'Clouds',
description: 'few clouds',
temp: 45.7
}
}
},
_handleTextChange(event) {
console.log(event.nativeEvent.text);
this.setState({
zip: event.nativeEvent.text
});
},
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
You input {this.state.zip}.
</Text>
<Forecast
main={this.state.forecast.main}
description={this.state.forecast.description}
temp={this.state.forecast.temp}/>
<TextInput
style={styles.input}
returnKeyType="go"
onSubmitEditing={this._handleTextChange}/>
</View>
);
}
});
module.exports = WeatherProject;
Forecast.js
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
var styles = StyleSheet.create({
bigText: {
flex: 2,
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#FFFFFF'
},
mainText: {
flex: 1,
fontSize: 16,
textAlign: 'center',
color: '#FFFFFF'
}
});
var Forecast = React.createClass({
render() {
return (
<View>
<Text style={styles.bigText}>
{this.props.main}
</Text>
<Text style={styles.mainText}>
Current conditions: {this.props.description}
</Text>
<Text style={styles.bigText}>
{this.props.temp}°F
</Text>
</View>
);
}
});
module.exports = Forecast;
The expected outcome looks like this (from the book):
But my actual outcome is this:
And here is the view debug hierarchy:
Any help at all would be greatly appreciated.

Add this style in Forecast:
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
then add the style into the View:
<View styles={style.container}>