I want to set my simple TouchableHighlight just near my CustomDrawer but i can't find how to do it . Here is the code .
class App extends Component {
render() {
return (
<View style={{ flex: 1, flexDirection: 'row',marginTop: (Platform.OS
=== "ios") ? 20 : 0 }} >
<View style={styles.container}>
<TouchableHighlight onPress={this._onPressButton}>
<Image
style={styles.button}
source={require('./camera.png')}
/>
</TouchableHighlight>
</View>
<CustomDrawer
content={<NavigationMenu />}
ref="drawerSideMenu"
onClose={() => { this.props.dispatch(navigationMenuStatus(false)); }}
onOpen={() => { this.props.dispatch(navigationMenuStatus(true)) }}>
<HeaderBar />
</View>
);
}
}
const styles = StyleSheet.create({
button: {
padding: 6,
height:50,
width:50
},
countContainer: {
},
countText: {
color: '#FF00FF'
}
})
export default Appp
Actually i get this as interface but i want to make the button Camera in the blue area near the icon of menu
Any help please ?
Try inserting the camera icon inside the menu bar.
something like this
<View style={styles.container}>
<View style={styles.menuBar}>
<Icon/>
<Menu/>
</View>
</View>
Related
I'm trying to display a list of TouchableOpacity to navigate to an other page with navigation.navigate(...).
I'm using map to display the list but I can't navigate, the onPress don't work with this error message : "undefined is not an object (evaluating 'navigation.navigate')
What am I doing wrong ?
function PopupMenuAction ({navigation}) {
return (
<>
<TouchableOpacity style={style.shape1to2} onPress={() => resizeBox(1)}>
<Text style={style.subtext}>Add <Text style={{ color: layouts.secondary }}>+</Text></Text>
</TouchableOpacity>
<Modal transparent visible={visible}>
<SafeAreaView style={{ flex: 1 }} onTouchStart={() => resizeBox(0)}>
<Animated.View
style={[
style.popUp,
{ opacity: scale.interpolate({ inputRange: [0, 1], outputRange:[0, 1]}) },
{ transform: [{ scale }]},
]}
>
{/* THERE IS THE CODE WHERE IT DONT WORK
=>>>*/}
{actions.map((op, i) => (
<TouchableOpacity style={[
style.option,
{ borderBottomWidth: i === actions.length - 1 ? 0 : 1 }]}
key={i}
onPress={() => navigation.navigate('CreateReaction')}
>
<Text style={{ fontFamily: "Title-Font", fontSize: 15 }}>{op.title}</Text>
</TouchableOpacity>
))}
</Animated.View>
</SafeAreaView>
</Modal>
</>
)
}
Believe navigation does not exist in your functional components because the error indicates it is undefined.
Try to import the useNavigation() hook from react-navigation library and use the returned navigate function.
import { useNavigation } from '#react-navigation/native';
function PopupMenuAction ({navigation}) {
const { navigate } = useNavigation()
return (
// rest of your code
)
docs: https://reactnavigation.org/docs/use-navigation/
I'm trying to implement a flatlist of comments alongside a textinput at the bottom. However, when I try to place the textinput in a keyboard avoiding view so that it gets pushed to the top to see the input being typed in, it doesn't go to the top and stays at the bottom. Here is my code:
render() {
return (
<KeyboardAvoidingView enabled behavior='padding' style={styles.container}>
<View style={styles.commentStyles}>
<FlatList
keyExtractor={(item) => JSON.stringify(item.date)}
data={this.props.post.comments}
renderItem={({item}) => (
<View style={[styles.row, styles.commentContainer]}>
<Image style={styles.roundImage} source={{uri: item.commenterPhoto}}/>
<View style={[styles.left]}>
<Text>{item.commenterName}</Text>
<Text style={styles.commentText}>{item.comment}</Text>
</View>
</View>
)}
/>
<TextInput
style={styles.input}
onChangeText={(comment) => this.setState({comment})}
value={this.state.comment}
returnKeyType='send'
placeholder='Add Comment'
onSubmitEditing={this.postComment}
/>
</View>
</KeyboardAvoidingView>
);
}
My container just has a flex: 1 styling applied to it. I tried reading through the documentation for KeyboardAvoidingView but found it to be very confusing. If you guys can help me in any way, would greatly appreciate it!
Give this a try.
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
KeyboardAvoidingView,
Platform,
Dimensions,
TextInput
} from 'react-native';
const {height: fullHeight} = Dimensions.get('window');
class Comment extends Component {
constructor(props) {
super(props);
this.state = {
pageOffset: 0,
};
}
onLayout = ({
nativeEvent: {
layout: {height},
},
}) => {
const pageOffset =
fullHeight - height;
this.setState({pageOffset});
};
render() {
return (
<View style={styles.viewContainer} onLayout={this.onLayout}>
<KeyboardAvoidingView
style={styles.container}
keyboardVerticalOffset={this.state.pageOffset}
behavior={Platform.OS === 'ios' ? 'padding' : null}>
<FlatList
keyExtractor={(item) => JSON.stringify(item.date)}
data={this.props.post.comments}
renderItem={({item}) => (
<View style={[styles.row, styles.commentContainer]}>
<Image style={styles.roundImage} source={{uri: item.commenterPhoto}}/>
<View style={[styles.left]}>
<Text>{item.commenterName}</Text>
<Text style={styles.commentText}>{item.comment}</Text>
</View>
</View>
)}
/>
<TextInput
style={styles.input}
onChangeText={(comment) => this.setState({comment})}
value={this.state.comment}
returnKeyType='send'
placeholder='Add Comment'
onSubmitEditing={this.postComment}
/>
</KeyboardAvoidingView>
</View>
);
}
}
export default Comment;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
},
viewContainer: {
flex: 1,
},
});
I've got a SectionList, and for every row in the list I want to be able to detect a click event.
renderList() {
if (this.state.searching) {
return (
<SectionList
sections={this.state.data}
renderSectionHeader={this.props.renderSectionHeader}
renderItem={this.props.renderItem}
/>
);
}
return null;
}
render() {
return (
<View style={styles.container}>
<Animated.View
style={{ opacity: 1 - this.state.backgroundColor }}
pointerEvents={this.state.searching ? 'none' : undefined}
>
{this.props.children}
</Animated.View>
<Animated.View
style={[
styles.backgroundColorView,
{ opacity: this.state.backgroundColor },
]}
/>
<Animated.View
style={[styles.searchResults, { top: this.state.yPos }]}
>
<TextInput
ref={(input) => { this.searchBar = input; }}
style={styles.textInput}
value={this.props.query}
onChangeText={this.onChangeText}
maxLength={100}
placeholder={this.props.placeholder}
onFocus={this.onFocus}
onBlur={this.onUnSearch}
/>
{this.renderList()}
</Animated.View>
</View>
);
For my renderItem method, I'm passing in the following PureComponent, which is just a Text contained in a TouchableHighlight.
class SubjectSearchItem extends React.PureComponent {
render() {
const item = this.props.item;
return (
<TouchableHighlight
onPress={() => console.log(item)}
>
<View style={{
marginHorizontal: 20,
marginVertical: 10,
}}
>
<Text>{`${item.item.long_name} (${item.item.short_name})`}</Text>
</View>
</TouchableHighlight>
);
}
}
and here's the renderItem prop I'm passing in
const renderItem = item => (
<SubjectSearchItem
item={item}
/>
);
The problem is, no click events are being detected. The row isn't getting highlighted, and the onPress isn't being fired. Any ideas?
Note: seems like this has been an issue for a little while
I'm working on an app with a Side Menu and a Navigator. In the side menu there are menu-items which let's you navigate (using Navigator), and the menu-items also get styled to indicate which one is active.
When first going to a new route with navigator.push() and then going back with navigator.pop(), the menu-item corresponding to the previously active route (which is now inactive) does not get either of the styles to show that it is either inactive or active. The style of the menu item (RouteMenuItem in the full example below) is as follows
style={[
{ padding: 15, borderColor: 'firebrick', borderWidth: 1 },
(isActive
? {backgroundColor: 'green'}
: {opacity: 0.5}
)
]}
How is it possible that neither {backgroundColor: 'green'} nor {opacity: 0.5} gets applied?
The image below shows how the bug looks on Android: "Route ONE" is selected, however, the menu item for "Route TWO" does not have opacity: 0.5 as it should (it should be half transparent like the 3rd menu item).
Below is the full code for a minimal example to reproduce the bug. The component hierarchy is like this:
<Navigator renderScene={() => <SideMenu><View /></SideMenu>} />
PS: We use StyleSheet.create() in our code, but in the example below I've just defined the styles inline. It does not seem to make any difference.
import React from 'react';
import {View, Text, TouchableHighlight, Navigator, Dimensions} from 'react-native';
import SideMenu from 'react-native-side-menu';
/***************
/** Routes **/
/****************/
const ROUTES = {
ONE: () => ({ title: 'Route ONE' }),
TWO: () => ({ title: 'Route TWO' }),
THREE: () => ({ title: 'Route THREE' }),
};
/**************/
/** Main **/
/**************/
export default class Main extends React.Component {
render() {
return (
<Navigator
style={{flex: 1}}
initialRouteStack={[
ROUTES.ONE(),
]}
renderScene={(route, navigator) =>
<Scene route={route} navigator={navigator} />
}
/>
);
}
}
/***************/
/** Scene **/
/***************/
class Scene extends React.Component {
state = {
menuIsOpen: false,
}
openMenu = () => {
this.setState({ menuIsOpen: true });
}
onMenuOpenChanged = (menuIsOpen) => {
if (this.state.menuIsOpen !== menuIsOpen) {
this.setState({ menuIsOpen });
}
}
render() {
const {route, navigator} = this.props;
return (
<View style={{flex: 1}}>
<SideMenu
menu={
<Menu
route={route}
navigator={navigator}
/>
}
menuPosition="right"
bounceBackOnOverdraw={false}
onChange={this.onMenuOpenChanged}
isOpen={this.state.menuIsOpen}
openMenuOffset={Dimensions.get('window').width * 0.75}
disableGestures={false}
>
<Screen route={route} navigator={navigator} openMenu={this.openMenu} menuIsOpen={this.state.menuIsOpen} />
</SideMenu>
</View>
);
}
}
/**************/
/** Menu **/
/**************/
class Menu extends React.Component {
render() {
const {route, navigator} = this.props;
return (
<View style={{ flex: 1, backgroundColor: 'coral', paddingTop: 25 }}>
<Text>Currently at {route.title}</Text>
<RouteMenuItem forRoute={ROUTES.ONE()} route={route} navigator={navigator} />
<RouteMenuItem forRoute={ROUTES.TWO()} route={route} navigator={navigator} />
<RouteMenuItem forRoute={ROUTES.THREE()} route={route} navigator={navigator} />
</View>
);
}
}
const RouteMenuItem = ({forRoute, route, navigator}) => (
<TouchableHighlight onPress={() => navigator.push(forRoute)}>
<Text style={[ { padding: 15, borderColor: 'firebrick', borderWidth: 1 }, (forRoute.title === route.title ? {backgroundColor: 'green'} : {opacity: 0.5}) ]}>
Go to {forRoute.title} ({(forRoute.title === route.title ? 'current route' : 'NOT CURRENT ROUTE')})
</Text>
</TouchableHighlight>
);
/*****************************/
/** Screen, inside Menu **/
/*****************************/
class Screen extends React.Component {
render() {
const {route, navigator, openMenu, menuIsOpen} = this.props;
return (
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', backgroundColor: 'peachpuff', paddingTop: 25 }}>
<HeaderButton onPress={navigator.pop}>Back</HeaderButton>
<HeaderButton onPress={openMenu}>Menu</HeaderButton>
</View>
<View style={{ flex: 1, backgroundColor: 'white' }}>
<Text style={{ margin: 50, fontSize: 50 }}>
{route.title}
</Text>
</View>
</View>
);
}
}
const HeaderButton = ({onPress, children}) => (
<TouchableHighlight underlayColor="green" onPress={onPress}>
<Text style={{ padding: 10, borderColor: 'firebrick', borderWidth: 1 }}>
{children}
</Text>
</TouchableHighlight>
);
The problem occurs becauase children of TouchableHighlight gets default opacity (1) after the TouchableHighlight is pressed. As that is a more specific problem I've asked a new question here.
In this case the bug appears when going back to a previous route, because the menu item in that instance of the Menu was pressed (moving us to a new route before we could spot the bug).
I am new to react native, I am trying to present a view modally. I have a table view and when one of the rows is clicked I want the view to show up modally.
This is how I am implementing the transition right now :
renderbooks(books) {
return (
<TouchableHighlight onPress={() => this.showbooksDetail(books)} underlayColor='#dddddd'>
<View>
<View style={styles.container}>
<View style={styles.rightContainer}>
<Text style={styles.title}>{books.title}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
showbooksDetail(books){
this.props.navigator.push({
title:books.title,
component: ProductView,
passProps:{books}
});
}
How can I modify this so that the view can be presented modally?
FYI: I have already looked at multiple questions and sample projects such as these:
How do I create a native looking modal view segue with react-native?
http://facebook.github.io/react-native/docs/modal.html#content
https://github.com/aaronksaunders/React-Modal-Nav-Example
Check out the built-in Modal. It's implemented on iOS, Android implementation should come in one of the next releases of React Native.
The documentation contains an example on how to use it.
In your case it would be something like:
renderBooks(books) {
...
<Modal
animated={true}
transparent={true}
visible={!!this.state.selectedBook}>
<Text>{this.state.selectedBook.title}</Text>
</Modal>
...
}
showDetail(book) {
this.setState({
selectedBook: book,
});
}
Check this simple and powerful small library react-native-modal-animated, simply install it by yarn add react-native-modal-animated, or npm install react-native-modal-animated.
import { AnimatedModal } from 'react-native-modal-animated
<View style={styles.container}>
<TouchableOpacity
onPress={() => {
this.setState({ modalVisible: true });
alert
}}
style={styles.button}
>
<Text style={styles.buttonText}>Show Modal</Text>
</TouchableOpacity>
<AnimatedModal
visible={this.state.modalVisible}
onBackdropPress={() => {
this.setState({ modalVisible: false });
}}
animationType="vertical"
duration={600}
>
{/*Any child can be used here */}
<View style={styles.modalCard}>
<Text>I'm AnimatedModal</Text>
<Text style={{fontWeight: 'bold', marginTop: 10}}>vertical</Text>
</View>
</AnimatedModal>
</View>
);
}
}
I am using the react-native modalbox. Its been awesome you get modals to be displayed in top,center,bottom,etc.Check the below link once:https://github.com/maxs15/react-native-modalbox
Sample:
import React from 'react';
import Modal from 'react-native-modalbox';
import Button from 'react-native-button';
import {
AppRegistry,
Text,
StyleSheet,
ScrollView,
View,
Dimensions
} from 'react-native';
class Example extends React.Component {
constructor() {
super();
this.state = {
isOpen: false,
isDisabled: false,
swipeToClose: true,
sliderValue: 0.3
};
}
onClose() {
console.log('Modal just closed');
}
onOpen() {
console.log('Modal just openned');
}
onClosingState(state) {
console.log('the open/close of the swipeToClose just changed');
}
render() {
return (
<View style={styles.wrapper}>
<Button onPress={() => this.refs.modal1.open()} style={styles.btn}>Basic modal</Button>
<Button onPress={() => this.refs.modal2.open()} style={styles.btn}>Position top</Button>
<Button onPress={() => this.refs.modal3.open()} style={styles.btn}>Position centered + backdrop + disable</Button>
<Button onPress={() => this.refs.modal4.open()} style={styles.btn}>Position bottom + backdrop + slider</Button>
<Modal
style={[styles.modal, styles.modal1]}
ref={"modal1"}
swipeToClose={this.state.swipeToClose}
onClosed={this.onClose}
onOpened={this.onOpen}
onClosingState={this.onClosingState}>
<Text style={styles.text}>Basic modal</Text>
<Button onPress={() => this.setState({swipeToClose: !this.state.swipeToClose})} style={styles.btn}>Disable swipeToClose({this.state.swipeToClose ? "true" : "false"})</Button>
</Modal>
<Modal style={[styles.modal, styles.modal2]} backdrop={false} position={"top"} ref={"modal2"}>
<Text style={[styles.text, {color: "white"}]}>Modal on top</Text>
</Modal>
<Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isDisabled={this.state.isDisabled}>
<Text style={styles.text}>Modal centered</Text>
<Button onPress={() => this.setState({isDisabled: !this.state.isDisabled})} style={styles.btn}>Disable ({this.state.isDisabled ? "true" : "false"})</Button>
</Modal>
<Modal style={[styles.modal, styles.modal4]} position={"bottom"} ref={"modal4"}>
<Text style={styles.text}>Modal on bottom with backdrop</Text>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
modal: {
justifyContent: 'center',
alignItems: 'center'
},
modal2: {
height: 230,
backgroundColor: "#3B5998"
},
modal3: {
height: 300,
width: 300
},
modal4: {
height: 300
},
wrapper: {
paddingTop: 50,
flex: 1
},
});
AppRegistry.registerComponent('Example', () => Example);