Develop Reference

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!

FlatList's Horizontal Not work well - React Native?

I have in the home screen 4 FlatList and it's work very well,
I render items as cards "Image, Name", I render items horizontally, it's work fine, but when I swipe to right/left I see some wired things like they get me back to the first item or render item previous another item "Some lag",
I don't know why! But when I delete horizontal it works very well without any issues!
Does any Body have an explanation for this issue?
By The Way, I got Data from API, And it's large :)
Sample Code
class Home extends PureComponent {
.....
render() {
<View style={styles.container}>
<ScrollView>
<View style={{marginVertical: 10}}>
<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
data={data.recent_tracks}
contentContainerStyle={{flexGrow: 1}}
ListEmptyComponent={<EmptyList />}
keyExtractor={(track, index) => track.id.toString()}
initialNumToRender={10}
renderItem={this._renderItem}
/>
</View>
</ScrollView>
</View>
....
}
}
I Got this in Log, Although I use PureComponent and react-native-fast-image For Images
VirtualizedList: You have a large list that is slow to update - make
sure your renderItem function renders components that follow React
performance best practices like PureComponent, shouldComponentUpdate,
etc. {dt: 1393, prevDt: 2471, contentLength: 3669.818115234375}

try this example anf let it work
import React, { Component } from "react";
import { FlatList, Text } from "react-native";
import { Card } from "react-native-elements";
const recent_tracks= [
];
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
recent_tracks: recent_tracks
};
}
render() {
return (
<FlatList
data={this.state.recent_tracks}
renderItem={({ item: rowData }) => {
return (
<Card
title={null}
image={{ uri: "http://via.placeholder.com/160x160" }}
containerStyle={{ padding: 0, width: 160 }}
>
<Text style={{ marginBottom: 10 }}>
hello
</Text>
</Card>
);
}}
keyExtractor={(item, index) => index}
/>
);
}
}
try this answer
feel free for Doubts , Hope it helps

How to apply expo react-native custom font to the entire container

I tried to load a custom font for my react-native app that i'm developing with expo but i don't know how to load a font in a simplier way for the whole screen container.
Currently i used the offical expo doc: Expo Custom Font Documentation
They said to use a Font.loadAsync() function and then use the
this.state.fontLoaded? like this:
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{
this.state.fontLoaded ? (
<Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
Hello, world!
</Text>
) : null
}
</View>
but did it exist a solution for applying the font on a container for example? I think it's not easy to e forced to surround EACH Text elements with the same function...
Currently the font is loading on ONE text element, but i would like to be able to easily use my font on a container, or many Text elements at once.
Here is my code:
state = {
fontLoaded: false,
};
async componentDidMount() {
await Font.loadAsync({
'ubuntu-medium': require('../assets/fonts/Ubuntu-Medium.ttf'),
});
this.setState({ fontLoaded: true });
}
render() {
return (
<View style={styles.main_container}>
<View style={styles.inner_main_container}>
<View style={styles.top_links_container}>
<View style={styles.profile_and_arrow_container}>
<Icon
name='arrow-back'
color='white'
style={styles.icon} />
{
this.state.fontLoaded ? (
<Text style={styles.top_links_profile}>Profil</Text>
) : null
}
</View>
<View style={styles.profile_edit_container}>
<Text style={styles.top_links_edit}>Editer</Text>
</View>
</View>
<View style={styles.profile_avatar_container}>
<Avatar
rounded
size='xlarge'
source={{ uri: 'https://randomuser.me/api/portraits/men/27.jpg' }}>
</Avatar>
</View>
<View style={styles.profile_infos_container}>
{
this.state.fontLoaded ? (
<Text style={styles.user_name}> Dupont Jean </Text>
) : null
}
<Text style={styles.user_title}> CSD - Product Owner </Text>
</View>
<View style={styles.subprofile_infos_container}>
<View style={styles.user_experience}>
<Text>Experience </Text>
<Text style={styles.user_experience_years}> 7ans</Text>
</View>
<View style={styles.user_grade}>
<Text>Grade </Text>
<Text style={styles.user_grade_letter}> D </Text>
</View>
</View>
<View numberOfLines={6}>
<Text style={styles.user_bio}> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard…</Text>
</View>
<View>
<Text style={styles.user_bio_see_more_link}> Voir plus</Text>
</View>
<Divider style={styles.divider} />
<View style={styles.bottom_container}>
<View style={styles.bottom_cm_text_info_container}>
<Text style={styles.bottom_cm_text_info}>Carrière Manager d'Evelyne</Text>
<Text style={styles.bottom_cm_text_user_name}>Jerôme Durand</Text>
</View>
<View style={styles.bottom_cm_avatar}>
<Avatar
rounded
size='small'
source={{ uri: 'https://randomuser.me/api/portraits/men/27.jpg' }}
/>
<Icon
name='right'
type='antdesign'
color='grey'
onPress={() => console.log('hello button cm view')}
/>
</View>
</View>
</View>
</View>
);
}
}

Finally i found a nicely working solution.
I had to create a custom component like this one:
1. Create a custom component TextCustom.js for example and put this into:
import React from 'react'
import { Text, StyleSheet, View, ActivityIndicator } from 'react-native'
import * as Font from 'expo-font'
export default class TextCustom extends React.Component {
constructor(props) {
super(props)
this.state = {
loading: true,
}
}
async componentWillMount() {
await Font.loadAsync({
'Ubuntu': require('./../assets/fonts/Ubuntu-Medium.ttf')
})
this.setState({ loading: false })
}
render() {
if (this.state.loading) {
return <ActivityIndicator/>
}
return (
<View>
<Text style={[styles.defaultStyle, this.props.style]}>
{this.props.children}
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
defaultStyle: {
fontFamily: 'Ubuntu'
},
})
Don't forget to import Font from Expo (for people using Expo)
2. in the component you want to use the custom font, simply import and use the newly created component:
import TextCustom from './TextCustom'
import TextBoldCustom from './TextBoldCustom' (if you want to use a Bold or italic font)
and use it:
<View>
<TextCustom style={styles.info_welcome}>Bonjour</TextCustom>
</View>

The documentation says there is no way to set the font across the entire app.
The recommended way to use consistent fonts and sizes across your application is to create a component MyAppText that includes them and use this component across your app. You can also use this component to make more specific components like MyAppHeaderText for other kinds of text.
More info and example on the Expo <Text> docs:
https://docs.expo.io/versions/latest/react-native/text/
--
As far as loading custom font files, I'd recommend using SplashScreen.preventAutoHide() to keep the splash screen visible while you load the fonts in a function via <AppLoading>. This provides a smooth loading experience, and ensures your fonts are available when the rest of your app is eventually rendered.

React Native FlatList doesn't render

I'm trying to add a searchable list to my React Native app, but encounter a problem whilst trying to render the list itself. The error is the old "You likely forgot to export your component from the file its defined in, or you might have mixed up default and named imports". I'm sure this may be my issue, but after reading several variations of the issue online, I can't seem to figure out where the issue is.
I've tried changing every and any used import in the fashion of listing them one by one, using and removing the brackets. I tried reinstalling react-native-elements, and checked my dependencies for correct versions. Also tried rendering list without data.
List component:
Liste.js
import { View, Text, FlatList } from "react-native";
import {List, ListItem } from "react-native-elements"
class Liste extends Component {
constructor(props) {
super(props);
...
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<List>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={`${item.name.first} ${item.name.last}`}
subtitle={item.email}
avatar={{ uri: item.picture.thumbnail }}
/>
)}
/>
</List>
</View>
);
}
}
export default Liste;
I expected the list to render at all, it doesnt.

First, you need to remove the List component, because the react-native-elements does not contain it.
The second thing that you need to do is to remove alignItems: "center", justifyContent: "center" from the View component.
Also, in the FlatList component, the property avatar is wrong. You have to choose between: leftAvatar and rightAvatar.
You comonent should like look this:
<View style={{ flex: 1 }}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={item.title}
subtitle={item.body}
leftAvatar={{
source: item.thumbnail && { uri: item.thumbnail },
}}
/>
)}
/>
</View>
Here is a working demo.

How to use Drawer in react native proper way?

It makes on App.js page
const MyApp = createDrawerNavigator({
Requester: {
screen: Requester,
},
Forgot: {
screen: Forgot,
},
});
I want to show a Welcome page with a menu button on it. When user clicks the menu button a drawer menu should appear.
<View style={{marginTop:30, justifyContent: 'center', backgroundColor:
'#095473', paddingLeft: '80%', flexDirection: 'row' }}>
<TouchableOpacity onPress={() =>
{this.props.navigation.navigate('DrawerOpen'); } }>
<Icon
name="menu"
size={60}
color="white"
//onPress={() => this.props.navigation.navigate("Register")}
/>
</TouchableOpacity>
</View>
But Drawer was not open why ? please guide

I'd assume you are using recent react-navigation, because you use createDrawerNavigator function. Based on the latest doc, they replaced the previous API with the newer one. See here
to open the drawer, you need to use this.props.navigation.openDrawer() instead this.props.navigation.navigate('DrawerOpen').
So the rough implementation would be like this:
<TouchableOpacity onPress={this.props.navigation.openDrawer} />
full reference how to implement it:
https://reactnavigation.org/docs/en/drawer-based-navigation.html