Mine react Native Gesture Is Not Working Here Goes My Code
I have installed the library with this command
$ expo install react-native-gesture-handler
Please help me with this issue:
how can I resolve this
code:
import React from 'react'
import { Image, StyleSheet, TouchableHighlight, View } from
'react-native'
import Colors from '../config/Colors.js'
import AppText from './AppText/AppText.js'
import Swipeable from 'react-native-gesture-handler/Swipeable';
const HorizontalListitem = ({ image, title, subtitle, onPress,
style, renderRightActions }) => {
return (
<Swipeable renderRightActions={() => (
<View style={{ width: 80, height: 100, backgroundColor: 'red'
}}></View>
)}>
<TouchableHighlight
underlayColor={Colors.lightgray}
onPress={onPress}
style={style}
>
<View style={styles.listContainer}>
<Image style={styles.image} source={{ uri: image }}>
</Image>
<View style={styles.title}>
<AppText style={{ fontWeight: 'bold' }}>{title}
</AppText>
<AppText style={styles.subtitle}>{subtitle}</AppText>
</View>
</View>
</TouchableHighlight>
</Swipeable >
)
}
wrapping the swipeable with {GestureHandlerRootView} also helps
import Swipeable from 'react-native-gesture-handler/Swipeable';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
<GestureHandlerRootView>
<Swipeable renderRightActions=...>
</Swipeable>
</GestureHandlerRootView>
wrapping the swipeable with {GestureHandlerRootView} also helps
enter image description here
Here is the solution: -
import React from "react";
import { View, StyleSheet, Image, TouchableHighlight } from "react-native";
import Swipeable from 'react-native-gesture-handler/Swipeable';
import AppText from "./AppText";
import colors from "../config/colors";
function ListItem({ title, subTitle, image, renderRightActions, onPress }) {
return (
<Swipeable renderRightActions={renderRightActions}>
<TouchableHighlight
underlayColor={colors.light}
onPress={onPress}>
<View style={styles.container}>
<Image style={styles.image} source={image}/>
<View>
<AppText style={styles.title}>{title}</AppText>
<AppText style={styles.subTitle}>{subTitle}</AppText>
</View>
</View>
</TouchableHighlight>
</Swipeable>
);
}
And in MessageScreen.js
<FlatList
data={messages}
keyExtractor={message => message.id}
renderItem={({ item }) => (
<ListItem
title={item.name}
subTitle={item.description}
image={item.image}
renderRightActions={() => (
<View style={{ width: 70, height: 100, backgroundColor: 'red' }}></View>
)}
/>
)}
ItemSeparatorComponent={ListItemSeparator}
/>
Happy Coding
I encountered a similar issue when I'm using expo SDK 39. I couldn't sort it out. I tried upgrading it to v43 and it worked fine. here is a working expo snack I created for testing Swipeable.
The api has changed. See docs below
import Swipeable from 'react-native-gesture-handler/Swipeable';
https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/swipeable
Related
i am new here and stuck because of this error. please help me to solve this error.
import React from "react";
import { View, Image, StyleSheet, Text, TouchableOpacity } from "react-native";
function ListItem({ image, title, subtitle }) {
return (
<TouchableOpacity>
<View style={styles.container}>
{image && <Image style={styles.img} source={image} />}
<View>
<Text>{title}</Text>
<Text>{subtitle}</Text>
</View>
</View>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: "row"
},
img: {
width: 70,
height: 70,
borderRadius: 35
}
});
export default ListItem;
and invoke it in other component with passing arguments
import * as React from "react";
import Icon from "./Components/Icon";
export default function App() {
return (
<SafeAreaView style={styles.screen}>
<ListItem
title="My title"
subtitle="subtitle"
imgComponent={<Icon name="email" />}
/>
</SafeAreaView>
);
}
and i am facing this error
I'm trying to use Flex feature of Ant Design Mobile to position the buttons with flex direction of column. It seems like the Flex and Flex.Item are not working. The buttons positions are stacked together.
App.js
import React from 'react';
import {Text, View, StyleSheet, Image, TouchableOpacity, SafeAreaView} from 'react-native';
import {Provider, Button, WhiteSpace, Flex} from '#ant-design/react-native';
import customTheme from './src/styles/customTheme';
const App = () => {
return (
<Provider theme={customTheme}>
<SafeAreaView>
<View>
<Flex direction='column'>
<Flex.Item>
<TouchableOpacity style={styles.facebookLoginButton} activeOpacity={0.5}>
<Image
source={require('./img/facebookLoginButton.png')}
style={styles.img}
/>
</TouchableOpacity>
</Flex.Item>
<Flex.Item>
<TouchableOpacity style={styles.googleLoginButton} activeOpacity={0.5}>
<Image
source={require('./img/googleLoginButton.png')}
/>
</TouchableOpacity>
</Flex.Item>
</Flex>
</View>
</SafeAreaView>
</Provider>
);
};
export default App;
const styles = StyleSheet.create({
facebookLoginButton: {
width: 240,
height: 40
},
googleLoginButton: {
borderColor: '#D3D3D3',
borderWidth: 0.5,
width: 240,
height: 40
}
});
I'm trying to build an app and it was working but for some reason now everytime I try to export something it no longer works (stays greyed out).
I have copy and pasted a page and just change the file name and the export class still stays greyed out.
I have deleted the node folder, cleared the cache, and reinstall the cache. Still won't work
Created a new file in the screen and component folder, copy pasted a working page (screen file to a screen file & component file to component file). The export class still stays greyed out.
example of a button component
import React, { Component } from 'react';
import {View, StyleSheet, Dimensions} from 'react-native';
export default function Timer(props) {
return(
<View style={styles.Button}>
<View>
{ props.children }
</View>
</View>
)
}
const styles = StyleSheet.create({
Button: {
height:31,
width: 87,
borderRadius: 10,
backgroundColor: '#E0F7EF',
display: 'flex',
justifyContent: 'center', /* center items vertically, in this case */
alignItems: 'center', /* center items horizontally, in this case */
},
})
Example of a screen component
import React, {Component} from 'react';
import * as firebase from 'firebase';
import { NavigationActions, StackNavigator } from 'react-navigation';
import{ ImageBackground, Dimensions, View, ScrollView, SafeAreaView, TextInput, Picker } from 'react-native';
import { SimpleLineIcons } from '#expo/vector-icons';
import { Container, Header, Content, Card, CardItem, Body, Text } from 'native-base';
import { MaterialCommunityIcons, FontAwesome, MaterialIcons, Ionicons} from '#expo/vector-icons';
import Strings from '../utils/Strings';
var styles = require('../../assets/files/Styles');
var {height, width} = Dimensions.get('window');
//NAVIGATION AT TOP
export default class Cardio extends Component {
static navigationOptions = {
title: `${Strings.ST201}`,
};
navigateToScreen = (route) => () => {
const navigateAction = NavigationActions.navigate({
routeName: route,
});
this.props.navigation.dispatch(navigateAction);
}
render () {
return (
<Container style={styles.background_general}>
<ScrollView>
<View style={{flexDirection:'column', backgroundColor: '#000000', height: height * 0.25}}>
<ImageBackground
source={require('../../assets/images/header.jpg')}
style={{flex: 1, width: null, height: null}}>
</ImageBackground>
</View>
<View style={styles.cardslayout}>
<TextInput
style={styles.CommentBox}
placeholder = 'sets'
returnKeyType="done"
/>
<TextInput
style={styles.CommentBox}
placeholder = 'Reps'
returnKeyType="done"
/>
</View>
<View>
<TextInput />
</View>
<View style={styles.cardslayout}>
<Content horizontal={true}>
{/*Bike*/}
<Card>
<CardItem style={styles.card}>
<Text>
<MaterialIcons name="directions-bike" size={32} color="white"/>
</Text>
</CardItem>
</Card>
<Card>
<CardItem style={styles.card}>
<Text>
<MaterialCommunityIcons name="run-fast" size={32} color="white"/>
</Text>
</CardItem>
</Card>
<Card>
<CardItem style={styles.card}>
<Text>
<Ionicons name="ios-walk" size={32} color="white"/>
</Text>
</CardItem>
</Card>
</Content>
</View>
{/*END OF CUSTOM INPUT*/}
</ScrollView>
</Container>
)
}
}
This is what I mean by it being grayed out.
This is a custom button file in the component folder.
You can see the export default function working in the custom button file. Now am going to create a test file and copy and paste the same code into it and simply change the function name. Now before I change the function name the "export default function" turns grey but I change the name to reduce confusion here.
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Image, TextInput, TouchableOpacity, background, ImageBackground,} from 'react-native';
import { navigate, navigation, } from 'react-navigation';
const lockIcon = require("./assets/images/lock.png");
const personIcon = require("./assets/images/person.png");
export default class screens extends Component {
render() {
return (
<ImageBackground
style={[styles.background, styles.container]}
source={background}
resizeMode="cover"
>
<View style={styles.container} />
<View style={styles.wrapper}>
<View style={styles.inputWrap}>
<View style={styles.iconWrap}>
<Image
source={personIcon}
style={styles.icon}
resizeMode="contain"
/>
</View>
<TextInput
placeholder="Username"
style={styles.input}
underlineColorAndroid="transparent"
/>
</View>
<View style={styles.inputWrap}>
<View style={styles.iconWrap}>
<Image
source={lockIcon}
style={styles.icon}
resizeMode="contain"
/>
</View>
<TextInput
placeholder="Password"
secureTextEntry
style={styles.input}
underlineColorAndroid="transparent"
/>
</View>
<TouchableOpacity activeOpacity={.5} style={styles.button}
title="Go to Jane's profile"
onPress={() => navigation.navigate('Profile')}
/>
<TouchableOpacity activeOpacity={.5}>
<View>
<Text style={styles.forgotPasswordText}>Forgot Password?</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.container} />
</ImageBackground>
);
}
}
TypeError: Cannot read property 'navigate' of undefined
You seem to be confused with react-navigation API.
First, you need to understand one thing: you can not just make import { navigation } from 'react-navigation' and then call navigation.navigate('YourRoute'), because the library (react-navigation) has no idea about your screens (routes). To make it understand what YourRoute (in your case it's Profile) actually is, you need to provide it some information.
Create separate file and call it Navigation. Then paste this code into it:
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from './pathToYourLoginScreenGoesHere';
import ProfileScreen from './pathToYourProfileScreenGoesHere';
const AppNavigator = createStackNavigator(
{
Login: {
screen: LoginScreen,
},
Profile: {
screen: ProfileScreen,
},
},
{
initialRouteName: 'Login',
},
);
export default AppNavigator;
By doing that, you create your basic navigation stack with two screens (Login and Profile) and have your Login screen as initial. But now it's just a separate file and your application knows nothing about it. Now you should connect this file with your app. Modify your App.js file:
import AppNavigator from './hereGoesRouteToThePreviousFile';
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
Providing AppContainer as a root component of your app you pass all necessary props to child screens. Now you have navigation prop in your child screens under the hood.
Now you should modify your file in 2 steps:
Delete import { navigate, navigation, } from 'react-navigation'; string
Right before return word you should paste this line of code: const { navigation } = this.props;
So now your file should look like this:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, TouchableOpacity, ImageBackground,} from 'react-native';
import styles from './pathToYourStylesFile';
const background = require("./assets/images/yourBackgroundImageFile.png");
const lockIcon = require("./assets/images/lock.png");
const personIcon = require("./assets/images/person.png");
export default class screens extends Component {
render() {
const { navigation } = this.props;
return (
<ImageBackground
style={[styles.background, styles.container]}
source={background}
resizeMode="cover"
>
<View style={styles.container}>
<View style={styles.wrapper}>
<View style={styles.inputWrap}>
<View style={styles.iconWrap}>
<Image
source={personIcon}
style={styles.icon}
resizeMode="contain"
/>
</View>
<TextInput
placeholder="Username"
style={styles.input}
underlineColorAndroid="transparent"
/>
</View>
<View style={styles.inputWrap}>
<View style={styles.iconWrap}>
<Image
source={lockIcon}
style={styles.icon}
resizeMode="contain"
/>
</View>
<TextInput
placeholder="Password"
secureTextEntry
style={styles.input}
underlineColorAndroid="transparent"
/>
</View>
<TouchableOpacity activeOpacity={.5} style={styles.button}
title="Go to Jane's profile"
onPress={() => navigation.navigate('Profile')}
/>
<TouchableOpacity activeOpacity={.5}>
<View>
<Text style={styles.forgotPasswordText}>Forgot Password?</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.container} />
</ImageBackground>
);
}
}
Also pay attention at these moments: I deleted import of background property from 'react-native' lib, because there is no exported property like that in react-native. Instead, provide real path to const background = require("./assets/images/yourBackgroundImageFile.png");, it should be a real image you want to use as a background image.
I am using React Navigation to create custom NavigationDrawer with a header on top this is how my code looks
import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import AboutScreen from './modules/screens/About/index'
import ContactScreen from './modules/screens/Contact/index'
import HomeScreen from './modules/screens/Home/index'
import { createDrawerNavigator, DrawerItems } from "react-navigation";
import { Image, ScrollView, SafeAreaView, Dimensions } from 'react-native';
class NewDrawer extends Component {
render() {
return (
<AppDrawer />
);
}
}
const AppDrawer = createDrawerNavigator({
HomeScreen: HomeScreen,
AboutScreen: AboutScreen,
ContactScreen: ContactScreen,
},
//Commenting below part makes my code work
{
contentComponent: CustomDrawer
}
)
const CustomDrawer = (props) => (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: 150, backgroundColor: 'white' }}>
<Image source={require('./modules/images/header.jpeg')}
style={{ height: 120, width: 120 }}>
</Image>
</View>
<ScrollView>
<DrawerItems {...props}>
</DrawerItems>
</ScrollView>
</SafeAreaView>
)
export default NewDrawer;
If I remove contentComponent i see my drawer items.
How can I get Header with custom drawer item?
I am using:-
npm > v6.4.1
Node > v8.12.0
react-navigation > v2.17.0
I am following this tutorial
You are not sending props to CustomDrawer . Try code below.
contentComponent: props => <CustomDrawer {...props} />
Drawer.js
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: 150, backgroundColor: 'white' }}>
<Image source={require('./modules/images/header.jpeg')}
style={{ height: 120, width: 120 }}>
</Image>
</View>
<ScrollView>
<DrawerItems {...props}>
</DrawerItems>
</ScrollView>
</SafeAreaView>
App.js
import CustomDrawer from './Drawer' // Import the file
const AppDrawer = createDrawerNavigator({
HomeScreen: HomeScreen,
AboutScreen: AboutScreen,
ContactScreen: ContactScreen,
},
{
contentComponent: <CustomDrawer />
}
)
This should work tested on android device