Develop Reference

React Native FlatList ListHeaderComponent wrapped in SafeAreaView doesn't respect the boundaries of SafeAreaView

Description
Hello, I'm pretty new to React Native and I was trying to render a FlatList inside a ScrollView and I got an error mentioning this application of FlatList inside ScrollView is not proper and it may cause some scroll disorientations. So, I searched for solutions to this problem and found out there's ListHeaderComponent property for FlatList to render everything else inside ScrollView. I accomplished implementing this solution to my screen but now It doesn't respect to boundaries of SafeAreaView which is pretty annoying, I don't want to add hard-coded margin/padding to the outer ScrollView/View component. It wouldn't be pretty.
Current Implementation
screens/Home.js:
import React from 'react';
import {
View,
ScrollView,
StyleSheet,
Dimensions,
SafeAreaView
} from 'react-native';
import SearchBar from '../components/UI/SearchBar';
import CarouselSlider from '../components/UI/CarouselSlider';
import FeaturedProducts from '../components/UI/FeaturedProducts';
import RecommendedCategories from '../components/UI/RecommendedCategories';
import ProductList from '../components/UI/ProductList';
import { HeadingSecondary } from '../components/UI/Typography';
import CarouselSliderData from '../data/slider';
import MostSold from '../data/mostSold';
import Categories from '../data/categories';
const { width } = Dimensions.get('window');
const Home = props => {
const HeaderPart = (
<ScrollView>
<View style={styles.sectionSlider}>
<CarouselSlider
data={CarouselSliderData}
height={width*0.6}
width={width}
itemWidth={width - (width/5)}
/>
</View>
<View style={styles.sectionFeatured}>
<HeadingSecondary>Featured Products</HeadingSecondary>
<FeaturedProducts data={MostSold} />
</View>
<View style={styles.sectionRecommendedCategories}>
<HeadingSecondary>Recommended Categories For You</HeadingSecondary>
<RecommendedCategories data={Categories} />
</View>
<HeadingSecondary>Recommended Products For You</HeadingSecondary>
</ScrollView>
);
return (
<SafeAreaView style={styles.container}>
<SearchBar />
<View style={styles.sectionProducts}>
<ProductList
data={MostSold}
numColumns={2}
key={'Products'}
ListHeaderComponent={HeaderPart}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center'
},
sectionSlider: {
height: width*0.6,
marginBottom: 12
}
});
export default Home;
components/UI/ProductList.js:
import React from 'react';
import {
View,
FlatList,
StyleSheet,
SafeAreaView
} from 'react-native';
import ProductItem from './ProductItem';
const ProductList = props => {
return (
<View style={styles.container}>
<FlatList
data={props.data}
renderItem={itemData =>
<ProductItem {...itemData.item} />
}
{...props}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1
}
});
export default ProductList;
Current Result Of Implementation
What I Want to Accomplish
Thanks in advance!

It seems like wrapping the FlatList with ListHeaderComponent/ListFooterComponent properties inside a View component is not correct. I have updated my code to below and it's solved.
screens/Home.js
...
const Home = props => {
...
return (
<SafeAreaView style={styles.container}>
<SearchBar />
<ProductList
data={MostSold}
numColumns={2}
key={'Products'}
ListHeaderComponent={HeaderPart}
/>
</SafeAreaView>
);
};
...

Modal not getting opened on clicking the image of gallery component

I'm trying to open a model when I click on the image component in the gallery. Here I'm not getting the "flagImage" variable updated in onPress method of TouchableOpacity or the modal component is not getting the updated value of "flagImage" when onPress of TouchableOpacity changes its value. I need help here. The modal doesn't open at all whenever I touch the image component. It just does nothing :( Below is the code for gallery.component.js:
import React from 'react';
import { View, Image, ScrollView, TouchableOpacity, Modal, Text } from 'react-native';
import styles from './cameraStyles';
export default ({captures=[], flagImage=true}) => (
<ScrollView
horizontal={true}
style={[styles.bottomToolbar, styles.galleryContainer]}
>
{captures.map(({ uri }) => (
<View style={styles.galleryImageContainer} key={uri}>
<TouchableOpacity
onPress={()=> {
flagImage = !flagImage;
console.log('Touch: "'+flagImage+'"');
}}
>
<Image source={{ uri }} style={styles.galleryImage}/>
</TouchableOpacity>
<Modal visible={flagImage} onPress={() => {console.log('Modal: "'+flagImage+'"');flagImage = !flagImage;}} onRequestClose={() => flagImage = ! flagImage}>
<View>
<Image source={{ uri }} style={styles.galleryImageLarge}/>
</View>
</Modal>
</View>
))}
</ScrollView>
);

You can make use of useState hook to convert the props into a state where you can update them.
import React from 'react';
import { View, Image, ScrollView, TouchableOpacity, Modal, Text } from 'react-native';
import styles from './cameraStyles';
export default ({captures=[], lflagImage=false}) => {
const [flagImage, setflagImage] = React.useState(lflagImage);
return (
<ScrollView
horizontal={true}
style={[styles.bottomToolbar, styles.galleryContainer]}
>
{captures.map(({ uri }) => (
<View style={flagImage?styles.galleryImageContainer:styles.galleryImageContainerView} key={uri}>
<TouchableOpacity
onPress={()=> {
setflagImage(prevData => !prevData)
console.log('Touch: "'+flagImage+'"');
}}
>
<Image source={{ uri }} style={flagImage?styles.galleryImage:styles.galleryImageLarge}/>
</TouchableOpacity>
<Modal visible={flagImage} onRequestClose={() => setflagImage(prevData => !prevData)}>
<View>
<Image source={{ uri }} style={styles.galleryImageLarge}/>
</View>
</Modal>
</View>
))}
</ScrollView>
)
}

TouchableOpacity effect on Text

I want my Menu text to have the same effect that TouchableOpacity does on touch.And open a new screen
***Settings.js***
import React, { useState } from 'react'
import{StyleSheet,Text,View,TextInput} from 'react-native'
import { TouchableOpacity,FlatList,ScrollView } from 'react-native-gesture-handler'
export default function App(){
const[menu,menupeople]=useState([
{name:'My Account',key:1},
{name:'Notification Settings',key:2},
{name:'Clear Cache',key:3},
{name:'Legal Information',key:4},
{name:'Rate App Tak',key:5},
{name:'Version',key:6},
{name:'About',key:7},
])
return(
<View style={styles.container}>
<ScrollView>
{menu.map((item)=>{
return(
<View
key={item.key}
>
<Text style={styles.item}
>{item.name}</Text>
</View>
)
})}
</ScrollView>
</View>
)
}
const styles=StyleSheet.create({
container:{
flex:1,
backgroundColor:'#fff',
paddingTop:40,
paddingHorizontal:20,
alignItems:'center'
}
})
Is there any way to do this i am first time applying touchable opacity to a menu of items and each of them opens a new screen

You can use the touchableopacity instead of the View to wrap the menu item like below
{menu.map((item)=>{
return(
<TouchableOpacity onPress={()=>alert(item.name)}
key={item.key}
>
<Text style={styles.item}
>{item.name}</Text>
</TouchableOpacity>
)
})}
Here I've put an alert you can change it to your navigation code.
And please import the TouchableOpacity from react native
import { TouchableOpacity } from "react-native";

Touchable Opacity not responding in stack navigator screen - React Native

I'm building a React Native app, it uses React Navigation. I use TouchableOpacity throughout the app, however, in a stack navigator screen, it doesn't seem to work at all. Touching the element doesn't change the opacity and the onpress function doesn't work. The screen itself displays fine and all other screens in my app have TouchableOpacity's that work fine.
Using button doesn't respond either, I'm thinking this is a react navigation issue potentially? There is no issues transitioning to the screen though?
Here is my screen;
import React, {Component} from 'react';
import { View, Text, TouchableOpacity, Alert, Button} from 'react-native';
class RaceScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor:'rgba(30,30,30,0.98)'}}>
<TouchableOpacity onPress = {() => console.log('Hello')}>
<View style={{ margin:50, height:100, width: 200, backgroundColor:'red', alignItems:'center', justifyContent:'center' }}>
<Text style={{ color:'white' }}>
Go back
</Text>
</View>
</TouchableOpacity>
<Button title="Go back button" onPress = {() => console.log('Hello')}>
</Button>
</View>
);
}
}
export default RaceScreen

I've found that the Touchable components typically don't respond well to text children. You simply need to wrap it inside a View:
import React, {Component} from 'react';
import { View, Text, TouchableOpacity, Alert} from 'react-native';
export default class RaceScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor:'rgba(30,30,30,0.98)'}}>
<TouchableOpacity onPress = {() => console.log('Hello')}>
<View style={{ margin:50, height:100, width: 200, backgroundColor:'red', alignItems:'center', justifyContent:'center' }}>
<Text style={{ color:'white' }}>
Go back
</Text>
</View>
</TouchableOpacity>
</View>
);
}
}

I finally figured it out. In the createStackNavigator method from react-navigation, transparentCard:true is a deprecated property and was causing the bug. I was using version 3 documentation on a version 4 package of react navigation.
Looking at there site, they have just released version 5 which is great!
A note to the less experienced developers like myself, making sure you're aware of the version of each package you are using is critical for some of these difficult bugs. Don't let it get you down though, react native is elite!

How to add images? (React Native)

I tried several codes but I only have errors every time.
How to add images from my gallery (no links) one below the other, with text
at the top and bottom of each image?
Like this:
(source: noelshack.com)
import React, { Component } from "react";
import { Text, View, StyleSheet, Image, ImageBackground,ScrollView } from "react-native";
import withBackground from "../components/WithBackground";
class LinksScreen extends Component {
render() {
return (
<ScrollView>
<text>Hi</text>
<Image source={require('./assets/images/ici.jpg')} />
<text> Hello</text>
<text> Hi2</text>
<Image source={require('./assets/images/ici2.jpg')} />
<text> Hello2</text>
</ScrollView>
);
}}
export default withBackground(LinksScreen);
I am novice,
any help would be appreciated.

Can you give a screenshot of the result you are expecting?
There is something called a FlatList you can use that to achieve a list of images.
Note : menuData is an array of objects and Item is an object that has image title and URL
<FlatList
data={this.props.menuData}
renderItem={({ item }) => {
return(
<View style={{ flexDirection: 'row' }}>
<Image source={require(item.imageURL)} />
<Text>{item.imageText}</Text>
</View>
);
}}
keyExtractor={(item) => item.title }
/>
Use this style for Text:
textStyle: {
flex: 1,
width: '100%',
position: 'absolute',
alignSelf: 'center',
backgroundColor: 'rgba(0.57, 0.57, 0.57, 0.3)',
height: '100%',
}

I am going to show you a possibility of working with native-base, but it's just a suggestion. You can see some possibilities in the official docs: https://docs.nativebase.io/Components.html#Components
import React, { Component } from 'react';
import { Image, ImageBackground, View } from 'react-native';
import { Card, CardItem, Text, Left, Right } from 'native-base';
import styles from './styles';
class ProductImage extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<ImageBackground
style={ styles.image }
source={{ uri: this.props.photo }}
>
</ImageBackground>
</View>
);
}
}
export default ProductImage
So if you want to put a photo without props, it's just put the link image, like 'https://www.w3schools.com/w3css/img_lights.jpg'. Don't forget to install the dependence: npm install native-base --save

Can you try this once:
<ScrollView>
<View>
<Text>Hi</Text>
<Image source={require('./assets/snack-icon.png')} style={{ width: '100%',
height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />
</View>
<View>
<Text> Hi2</Text>
<Image source={require('./assets/snack-icon.png')} style={{ width: '100%',
height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />
<Text> Hello2</Text>
</View>
</ScrollView>