I'm learning how to build mobile applications with React Native and I'm following a React native course by Programming with Mosh. However, I ran into a problem where I can't get my program to allow me to swipe left to delete a list item. Swiping left should open up a red square.
I have tried reading the documentation, googling answers and watching youtube videos, but I have made 0 progress :(.
Here's my code for the ListItem component:
import React from 'react';
import {View, StyleSheet, Image, TouchableHighlight } from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import colors from '../config/colors';
import AppText from './AppText';
function ListItem({title, subTitle, image, onPress, renderRightActions}) {
return (
<Swipeable renderRightActions={renderRightActions}>
<TouchableHighlight
underlayColor={colors.lightGrey}
onPress={onPress}>
<View style={styles.container}>
<Image style={styles.image} source={image} />
<View style={styles.textContainer}>
<AppText style={styles.title}>{title}</AppText>
<AppText style={styles.subTitle}>{subTitle}</AppText>
</View>
</View>
</TouchableHighlight>
</Swipeable>
);
}
and here is the code for when I actually use it:
import React from 'react';
import {StyleSheet, FlatList} from 'react-native';
import ListItem from '../components/ListItem';
import Screen from '../components/Screen';
import ListItemSeperator from '../components/ListItemSeperator';
import ListItemDeleteAction from '../components/ListItemDeleteAction';
function MessagesScreen(props) {
return (
<Screen>
<FlatList
data={messages}
keyExtractor={message => message.id.toString()}
renderItem={({item}) =>
<ListItem
title={item.title}
subTitle={item.description}
image={item.image}
onPress={() => console.log('message selected', item)}
renderRightActions={ListItemDeleteAction}/>
}
ItemSeparatorComponent={ListItemSeperator}
/>
</Screen>
Where the renderRightActions={ListItemDeleteAction} is just another component which holds a View with some style:
function ListItemDeleteAction(props) {
return (
<View style={styles.container}></View>
);
}
Any help would be highly appreciated, Thank you in advance!
The answer was that I needed to use GestureHandlerRootView to wrap everything!
import React from 'react';
import {View, StyleSheet, Image, TouchableHighlight } from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import colors from '../config/colors';
import AppText from './AppText';
function ListItem({title, subTitle, image, onPress, renderRightActions}) {
return (
<GestureHandlerRootView>
<Swipeable renderRightActions={renderRightActions}>
<TouchableHighlight
underlayColor={colors.lightGrey}
onPress={onPress}>
<View style={styles.container}>
<Image style={styles.image} source={image} />
<View style={styles.textContainer}>
<AppText style={styles.title}>{title}</AppText>
<AppText style={styles.subTitle}>{subTitle}</AppText>
</View>
</View>
</TouchableHighlight>
</Swipeable>
</GestureHandlerRootView>
);
}
Now the component works on android.
Related
I am setting up a React app . I am getting the error "Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead."
i have this code App.js
import React from 'react';
import {text, StatusBar , StyleSheet, View }from 'react-native'
import Header from './src/components/Header';
import { Colors } from './src/global/styles';
export default function App() {
return (
<View style= {styles.container}>
<StatusBar
barStyle = "Ligh-content"
backgroundColor = {Colors.StatusBar}
/>
<Header/>
</View>
)
}
const styles = StyleSheet.create({
container: {flex:1}
})
////////////////////////////////////////////////////////////////////////////////////
in header.js
import React from 'react';
import { Text,View, StyleSheet , Dimensions } from "react-native";
import { Colors ,parameters } from '../global/styles';
import Icon from 'react-native-vector-icons/FontAwesome';
export default function Header(title){
return (<View style={styles.header}>
{
<Icon type="Material-community"
name = "arrow-left"
color = {Colors.headerText}
size={28} onPress = {() => {}}
/>
}
<View>
<Text style={styles.headerText}>{title}</Text>
</View>
</View>
)
}
const styles= StyleSheet.create ({
header:{
flexDirection : 'row',
backgroundColor:Colors.bouttons,
height: parameters.headerHeight
},
headerText:{
color: Colors.headerText,
fontSize:22,
fontWeight:"bold"
}
})
import {text, StatusBar , StyleSheet, View }from 'react-native'
change text with Text and if it still doesnt work can u write your
import { Colors ,parameters } from '../global/styles' file in here
I have even tried importing image and require method using react-native and it doesn't work!
This is my code:
import React from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Button,
Image
} from 'react-native';
export default class MentePair extends React.Component {
render(){
return(
<Image
source={{ uri: 'asset:/Capture.png' }}
style={{ width: 40, height: 40 }}
/>
</View>
)
}
}
I had tried your code it's working fine when I use require, my code looks like this, check whether you are using correct path of image:
import React from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Button,
Image
} from 'react-native';
export default class MentePair extends React.Component {
render(){
return(
<View>
<Image
source={require('./assets/main.jpg')}
style={{ width: 100, height: 100 }}
/>
</View>
)
}
}
Your code doesn't seems to be using Image Tag you can visit official doc https://reactnative.dev/docs/image
Example:
<Image source={require('#expo/snack-static/react-native-logo.png')} />
I am new in react native, making a basic app that will find no of cases of corona in every country
so i have made 2 component both on separate file. how to switch from child to child component ?
Now i want to switch between them when i click on a button using stack navigator
App.js
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Splash from './scenes/splash';
import Corona from './scenes/corona';
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Splash">
<Stack.Screen name="Splash" component={Splash} />
<Stack.Screen name="Corona" component={Corona} />
</Stack.Navigator>
</NavigationContainer>
);
}
splash.js
import React from 'react'
import { StyleSheet, Text, View, Image, Button} from 'react-native';
export default function splash({navigation}) {
return (
<View style={styles.container}>
<Image
source={require('../assets/corona.jpg')}
resizeMode="cover" style={styles.img} />
<Text style={styles.txt}>
Track the current status {"\n"}
of the COVID-19 and{"\n"}
stay up to date.</Text>
<Text
style={styles.btn}
onPress={() => this.props.navigation.navigate('Corona')}
>Continue</Text>
</View>
)
}
corona.js (navigate to here)
import React from 'react'
import { StyleSheet, Text, View, Image, Button} from 'react-native';
export default function corona({navigation}) {
return (
<div>
<View>
<Text>Hello next screen</Text>
</View>
</div>
)
}
In splash.js
change
<Text style={styles.btn}
onPress={() => this.props.navigation.navigate('Corona')}>Continue</Text>
to
<Text style={styles.btn}
onPress={() => navigation.navigate('Corona')}>Continue</Text>
And in corona.js
Remove <div> tags in return, react-native doesn't support div tags
Hope this helps!
import React, { Component } from "react";
import { Text, Button, View, ScrollView } from "react-native";
import Chart from "react-native-f2chart";
import { WebView } from "react-native";
import { Container, Title } from "../components";
import { basePie, labelPie } from "./scripts";
type Props = {};
class PieChartScreen extends PureComponent {
render() {
return (
<ScrollView>
<Container>
<View>
<Title title="基础饼图" />
<View style={{ height: 250 }}>
<Chart initScript={basePie} webView={WebView} />
</View>
</View>
<View>
<Title title="带文本饼图" />
<View style={{ height: 350 }}>
<Chart initScript={labelPie} webView={WebView} />
</View>
</View>
<View style={{ height: 20 }} />
</Container>
</ScrollView>
);
}
}
export default PieChartScreen;
For your scenario Old WebView is now deprecated for better performance and to reduce package sizes. You can find more information about this by here
Solution
Install new WebView Package using this command
npm install --save react-native-webview
You can find more information regarding package installation from here
After installing above mentioned package now remove old imports and re-import WebView like this
import { WebView, } from 'react-native'; //Remove this from your imports
import { WebView } from 'react-native-webview'; //Add this to your imports
Your final code should look like this :
import React, { Component } from 'react';
import { Text, Button, View, ScrollView } from "react-native";
import Chart from "react-native-f2chart";
import { WebView } from 'react-native-webview'; // New changed import
import { Container, Title } from "../components";
import { basePie, labelPie } from "./scripts";
type Props = {}; class PieChartScreen extends PureComponent {
render() {
return (
<ScrollView>
<Container>
<View>
<Title title="基础饼图" />
<View style={{ height: 250 }}>
<Chart initScript={basePie} webView={WebView} />
</View>
</View>
<View>
<Title title="带文本饼图" />
<Chart initScript={labelPie} webView={WebView} />
</View>
</View>
<View style={{ height: 20 }} />
</Container>
</ScrollView>
);
}
}
export default PieChartScreen;
However you can find all the information about new WebView from here
I am trying to make a slider menu in Android. Therefor I made TouchableNativeFeedback with a View parent and Icon and text children wrapped in. Problem is the whole component isn´t clickable. Only the first 10% from the left hand side is clickable.
I have tried deleting all styling and switch to TouchableOpacity, TouchableWithoutFeedback and TouchableHighlight, but problem still remains.
import React from 'react'
import {View,
Text,
StyleSheet,
TouchableOpacity,
Platform
} from "react-native";
var DrawerMenuItem = React.createClass({
propTypes: {
onClick: React.PropTypes.func,
text: React.PropTypes.string.isRequired,
iconName: React.PropTypes.string.isRequired
},
render: function() {
return(
name={this.props.iconName}
size={24}
color={colors.lightBlack}
/>
{this.props.text}
)
}
});
module.exports = DrawerMenuItem;`
And in DrawerContent.js:
import React from 'react'
import DrawerMenuItem from './DrawerMenuItem'
import {View,
Text,
StyleSheet,
TouchableOpacity,
TouchableNativeFeedback,
BackAndroid,
ScrollView,
Image,
Platform
} from "react-native";
var DrawerContent = React.createClass({
propTypes: {
onClick: React.PropTypes.func,
resetStack: React.PropTypes.func,
closeDrawer: React.PropTypes.func,
},
_onPress: function(viewToShow){
this.props.onClick(viewToShow);
this.props.closeDrawer();
},
render: function() {
return (
<View>
<View>
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end'}}>
<Text>{reduxStore.getState().user.name}</Text>
</View>
<Image resizeMode='cover' source={require('../../resources/images/rf_logo_vit.png')}></Image>
</View>
<ScrollView showsVerticalScrollIndicator={false} style={styles.menu}>
<View>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='line-chart' text={'###'}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='bar-chart' text={'###'}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='bullseye' text={Localize('###')}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='phone' text={Localize('###')}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='file-text' text={Localize('###')}/>
</View>
</ScrollView>
</View>
);
}
});
DrawerContent is the slider menu and its working. But only the first 10% of the component is clickable. I wish to make the whole component clickable. I mean everything inside TouchableNativeFeedback. Right now it only half of the Icon.
React Native version: 0.31.0 Platform(s) Android (also same problem in
IOS) Operating System: macOS