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
}
});
Related
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
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 want to play only a segment of the animation in react native using lottie view
the length is about 5 seconds while in speed={1} I wanna play only the first 3 seconds and then go to the next screen
the code is down below
LogoScreen.js :
import React from 'react';
import { StyleSheet, View, Image, TextInput, StatusBar, Text } from "react-native";
import Icons from 'react-native-vector-icons/Ionicons';
import LottieView from "lottie-react-native";
export default class ChatScreen extends React.Component {
onAnimationFinish = () => {
this.props.navigation.navigate("Login")
}
render () {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#161f3d" />
<View>
<LottieView
source={require('../assets/animations/lottie/MotionCorpse-Jrcanest.json')}
style={{ justifyContent: "center", alignSelf: "center", height: "100%", width: "100%" }}
autoPlay
loop={false}
speed={1}
onAnimationFinish={this.onAnimationFinish}
/>
</View>
</View>
)
}
Well you can do it by several ways, one of the way would be like below.
You can use ref to play it manually and then after 3 seconds just redirect to next screen.
import React from 'react';
import { StyleSheet, View, Image, TextInput, StatusBar, Text } from "react-native";
import Icons from 'react-native-vector-icons/Ionicons';
import LottieView from "lottie-react-native";
export default class ChatScreen extends React.Component {
componentDidMount() {
this.anim.play();
setTimeout(() => {
this.props.navigation.navigate("Login")
}, 3000);
}
render() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#161f3d" />
<View>
<LottieView
source={require('../assets/animations/lottie/MotionCorpse-Jrcanest.json')}
style={{ justifyContent: "center", alignSelf: "center", height: "100%", width: "100%" }}
autoPlay={false}
loop={false}
speed={1}
ref={animation => { this.anim = animation; }}
/>
</View>
</View>
)
}
}
Another way is if you know exact frame numbers then you can play animation till that frame which completes at 3 seconds. It is already mentioned in Lottie documentation.
this.animation.play(30, 120);
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.
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