We Keep Coding

Is it possible to change the width of just a top "header" thing using popup-menu in react native?

Using React Native react-native-popup-menu is it possible to style the menu, so it'll look something like this below?
I have this at the moment, with no clue how to make the above one:
Current code used for styling:
<MenuOptions optionsContainerStyle={{marginLeft: 70, marginTop: 10, backgroundColor: "lightgray", borderBottomLeftRadius: 10, borderBottomRightRadius: 10, borderTopLeftRadius: 20, borderTopRightRadius: 20}}>
<View style={{height: 200}}>
<ScrollView>
{state.data.map((item) => {
return (
<MenuOption
key={item["ArticleId"]}
onSelect={() => {
props.setBudTextCallBack(item["Name"])
}}
customStyles={
{
optionWrapper: {height: 30, backgroundColor: "silver", marginLeft: 5, marginRight: 5, marginTop: 5, marginBottom: 1},
optionText: {fontSize: 18, color: "#faf3ea"},
}
}
text={item["Name"]}
/>
);
})}
</ScrollView>
</View>
</MenuOptions>
Is it possible, to change somehow the width of just this top header "kategoria"?

Working example Link: https://snack.expo.io/#msbot01/fascinated-pretzels
Working example is given below
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import Constants from 'expo-constants';
import { MenuProvider } from 'react-native-popup-menu';
import {
Menu,
MenuOptions,
MenuOption,
MenuTrigger,
} from 'react-native-popup-menu';
export default class NoApproval extends Component<Props> {
constructor(props) {
super(props);
this.state = {
color: 'orange'
}
}
render(){
return (
<MenuProvider>
<View>
<Text>Hello world!</Text>
<Menu style={{backgroundColor:'orange', height:60, alignItems:'center', margin:10, borderRadius:30, paddingLeft:20, flexDirection:'row'}} onBackdropPress={() => this.setState({color:'orange'})}>
<View style={{height:40, width:40, justifyContent:'center', alignItems:'center', borderWidth:2, borderRadius:30, borderColor:'white'}}>
<Image
style={{height:20,width:20}}
source={{uri: 'https://img.icons8.com/offices/344/folder-invoices.png'}}
/>
</View>
<MenuTrigger text='Kategoria' style={{backgroundColor:this.state.color, height:60, justifyContent:'center', marginLeft:5, borderTopLeftRadius:20, borderTopRightRadius:20, width:100, alignItems:'center'}} onPress={() => this.setState({color:'#d4d6d5'})}/>
<MenuOptions optionsContainerStyle={{marginTop:60, backgroundColor:'#d4d6d5', marginLeft:5, shadowOpacity: 0, shadowOffset: { width: 0, height: 0 }, shadowColor:'red'}}>
<MenuOption onSelect={() => alert(`Save`)} text='Save' style={{marginLeft:10}}>
<Text style={{color: 'white'}}>Save</Text>
</MenuOption>
<MenuOption onSelect={() => alert(`Delete`)} style={{marginLeft:10, }}>
<Text style={{color: 'white'}}>Delete</Text>
</MenuOption>
<MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='Disabled' />
</MenuOptions>
</Menu>
</View>
</MenuProvider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

Undefined is not an object (evaluating'_this.props)

Run on android emulator but undefined is not an object (evaluating'_this.props).
Hello guys, I would like a help to call MainScreen through onpress =>, can someone help me see where I'm going wrong
App.js is my Frist screen and MainScreen is the Second screen
I use App to navigate to Mainscreen.
APP.JS
import React, { useState, useEffect } from "react";
import {
View,
KeyboardAvoidingView,
Image,
TextInput,
TouchableOpacity,
Text,
StyleSheet,
Animated,
} from "react-native";
import { CollectionList } from "./src/components/CollectionList";
import { CollectionCreate } from "./src/components/CollectionCreate";
import { MainScreen } from "./MainScreen";
import { firstScreenStack } from "./MainScreen";
function App(props) {
const [offset] = useState(new Animated.ValueXY({ x: 0, y: 95 }));
const [opacity] = useState(new Animated.Value(0));
useEffect(() => {
Animated.parallel([
Animated.spring(offset.y, {
toValue: 0,
speed: 4,
bounciness: 20,
}),
Animated.timing(opacity, {
toValue: 1,
duration: 550,
}),
]).start();
}, []);
props.navigation
return (
<KeyboardAvoidingView style={styles.background}>
<View style={styles.containerLogo}>
<Image source={require("./assets/logoLogin.png")} />
</View>
<Animated.View
style={[
styles.container,
{
opacity: opacity,
transform: [{ translateY: offset.y }],
},
]}
>
<TextInput
style={styles.imput}
placeholder="Email"
autoCorrect={false}
onChangeText={() => {}}
/>
<TextInput
style={styles.imput}
placeholder="Senha"
autoCorrect={false}
onChangeText={() => {}}
/>
<TouchableOpacity
style={styles.btAcess}
onPress={() => props.navigation.navigate(MainScreen)}
>
<Text style={styles.btSubText}
>Acessar</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btCreate}>
<Text style={styles.btPassText}>Criar conta</Text>
</TouchableOpacity>
</Animated.View>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#a4a4a4",
},
containerLogo: {
flex: 1,
justifyContent: "center",
},
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
width: "90%",
paddingBottom: 50,
},
imput: {
backgroundColor: "#fff",
width: "90%",
marginBottom: 15,
color: "#222",
fontSize: 17,
borderRadius: 7,
padding: 10,
},
text: {
color: "#FFF",
},
btAcess: {
backgroundColor: "#00a0cf",
width: "90%",
height: 45,
alignItems: "center",
justifyContent: "center",
borderRadius: 7,
},
btSubText: {
color: "#ffff",
fontSize: 18,
},
btCreate: {
marginTop: 8,
},
btPassText: {
color: "#FFF",
},
});
export default App;
MainScreen.js
import "react-native-gesture-handler";
import * as React from "react";
import { View, TouchableOpacity, Image, StyleSheet } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
import { CollectionList } from "./src/components/CollectionList";
import { CollectionCreate } from "./src/components/CollectionCreate";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import { createDrawerNavigator } from "#react-navigation/drawer";
import CustomSidebarMenu from "./CustomSidebarMenu";
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const NavigationDrawerStructure = (props) => {
const toggleDrawer = () => {
props.navigationProps.toggleDrawer();
};
return (
<View style={{ flexDirection: "row" }}>
<TouchableOpacity onPress={toggleDrawer}>
<Image
source={{
uri:
"https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png",
}}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
};
export default function firstScreenStack({navigation}) {
return (
<Stack.Navigator initialRouteName="FirstPage">
<Stack.Screen
name="FirstPage"
component={CollectionList}
options={{
title: "Carfix",
headerLeft: () => (
<NavigationDrawerStructure navigationProps={navigation} />
),
headerStyle: {
backgroundColor: "#007AFF",
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
},
}}
/>
</Stack.Navigator>
);
}
function secondScreenStack() {
return (
<Stack.Navigator
navigation={navigation}
initialRouteName="Collection Create"
screenOptions={{
headerLeft: () => (
<NavigationDrawerStructure navigationProps={navigation} />
),
headerStyle: {
backgroundColor: "#007AFF",
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
},
}}
>
<Stack.Screen
name="Collection Create"
component={CollectionCreate}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
);
}
export function MainScreen (props) {
return (
<NavigationContainer>
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: "#007AFF",
itemStyle: { marginVertical: 1 },
}}
drawerContent={(props) => <CustomSidebarMenu {...props} />}
>
<Drawer.Screen
name="FirstPage"
options={{
drawerLabel: "Carfix",
drawerIcon: ({ focused, size }) => (
<Image
source={require("./assets/homeIcon.png")}
style={styles.iconStyle}
/>
),
}}
component={firstScreenStack}
/>
<Drawer.Screen
name="SecondPage"
options={{
drawerLabel: "Camera",
drawerIcon: ({ focused, size }) => (
<Image
source={require("./assets/cameraIcon.png")}
style={styles.iconStyle}
/>
),
}}
component={secondScreenStack}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
sideMenuProfileIcon: {
resizeMode: "center",
width: 70,
height: 70,
borderRadius: 200 / 2,
alignSelf: "center",
marginTop: 100,
},
iconStyle: {
width: 40,
height: 40,
marginBottom: 4,
marginLeft: 1,
},
customItem: {
padding: 16,
flexDirection: "row",
alignItems: "center",
marginRight: 5,
},
textSideBar: {
marginTop: 9,
},
});

On your app.js component, you do this.props.navigation.... You can't access to the component props like that.
It is a functional component so if you want to access to the props object,
function App(props) {
...
props.navigation...
}

React Native Component Exception <Text strings must be rendered within a Text component>

I am trying to build a react native application with the expo, First I try to build this application with my chrome web browser, it was worked without any issue after that I try to test the application with my android device and I'm getting an exception - "Text strings must be rendered within a <Text> component" HomeScreen.js files. I have no idea why this happened. My code as follows,
/*This is an Example of Grid View in React Native*/
// import * as React from "react";
import React from 'react';
import { Image, FlatList, StyleSheet, View, Text, TouchableOpacity, TextInput } from 'react-native';
import { COLORS } from '../../asserts/Colors/Colors';
import { CATEGORIES } from '../../asserts/mocks/itemListData';
import CategoryGridTitle from '../components/HomeGridTile';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import { HeaderButton } from '../components/HeaderButton';
import HomeScreenButton from '../components/HomeScreenButton';
//import all the components we will need
const renderTopBarItems = (topBarItems) => {
return (
<TouchableOpacity
style={styles.topBar}>
<Text style={styles.textStyle}> {topBarItems.item.category} </Text>
</TouchableOpacity>
)
}
const HomeScreen = props => {
const renderGridItem = (itemData) => {
return <CategoryGridTitle
title={itemData.item.title}
image={itemData.item.image}
onSelect={() => {
props.navigation.navigate({
routeName: 'PaymentHandlerScreen',
params: {
categoryId: itemData.item.id
}
});
}} />;
}
// const [images, setImages] = React.useState(picsumImages);
return (
<View style={styles.mainBody}>
<View style={styles.searchContainer}>
<TextInput
placeholder='Search'
style={styles.formField}
placeholderTextColor={'#888888'}
/>
<TouchableOpacity onPress={() => props.navigation.navigate('BarCodeScannerScreen')}
style={styles.saveFormField}>
<Image
source={require('../../../images/barcode.png')}
style={{
width: '100%',
height: '30%',
resizeMode: 'contain',
alignContent: 'center',
}}
/> </TouchableOpacity>
</View>
<View style={styles.tabBar}>
<FlatList
horizontal
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => item.id}
data={CATEGORIES}
renderItem={renderTopBarItems} />
</View>
<FlatList
keyExtractor={(item, index) => item.id}
data={CATEGORIES}
renderItem={renderGridItem}
numColumns={3} />
<HomeScreenButton style={styles.buttonView} />
</View>
);
};
HomeScreen.navigationOptions = navigationData => {
return {
headerTitle: 'Tickets',
headerRight: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title='profile'
iconName='ios-star'
onPress={() => {
console.log('profile clicked');
}} />
<Item
title='more'
iconName='md-more'
onPress={() => {
console.log('more clicked');
}} />
</HeaderButtons>
)
};
};
export default HomeScreen;
const styles = StyleSheet.create({
mainBody: {
flex: 1,
justifyContent: 'center',
backgroundColor: COLORS.background,
paddingTop: '3%',
},
searchContainer: {
flex: 1,
flexDirection: 'row',
},
tabBar: {
paddingBottom: '3%',
},
topBar: {
width: 150,
borderWidth: 1,
borderRadius: 20,
borderColor: COLORS.primary_blue,
padding: '5%',
marginLeft: '5%',
},
textStyle: {
color: COLORS.primary_blue,
textAlign: 'center',
fontWeight: 'bold',
fontSize: 14,
},
formField: {
flex: 4,
borderWidth: 1,
padding: '4%',
marginLeft: '2%',
borderRadius: 10,
borderColor: COLORS.gray,
backgroundColor: COLORS.gray,
fontSize: 15,
height: '35%',
},
saveFormField: {
flex: 0.5,
justifyContent: 'space-between',
alignItems: 'center',
margin: 10,
},
buttonView: {
position: 'absolute',
bottom: 0,
left: 0,
},
});
Thank you.

I ran into this error a couple of times. RN doesn't like extra spaces in tags. try removing the spaces before and after {topBarItems.item.category}
<Text style={styles.textStyle}>{topBarItems.item.category}</Text>

React-Navigation: aligning header to center

I am having trouble aligning my custom header to the middle of the header in a Stack Navigation.
This is my current view:
I would like to have the menu icon to the left and the title centered.
My current code for the screenOptions in the StackNavigator are
headerStyle: {
backgroundColor: "#a5ade8",
height: 80
},
headerTintColor: "#383f42",
headerTitleStyle: {
fontFamily: "heebo-black",
fontSize: 24
}
My code in my custom header is:
return (
<View style={styles.container}>
<MaterialIcons
name="menu"
style={styles.icon}
size={24}
onPress={openDrawer}
/>
<View>
<Text style={styles.headerTitle}>{title}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1,
height: "100%",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
headerTitle: {
fontFamily: "heebo-black",
fontSize: 24,
color: "#383f42",
letterSpacing: 1,
},
icon: {
position: "absolute",
left: 16
}
});
I have set my width to 100% in my header, however it takes only takes the space of the text...
Any help would be greatly appreciated!

Have you tried to use the headerTitleAlign option in screenOptions?
const HomeStackNavigator = () => {
return (
<Stack.Navigator
initialRouteName="Reviews"
screenOptions={{
headerTitleAlign: "center"
}}
>
<Stack.Screen
name="Reviews"
component={Home}
options={{
headerTitle: () => (
<View style={styles.container}>
<View>
<Text style={styles.headerTitle}>Reviews App</Text>
</View>
</View>
),
headerLeft: () => (
<MaterialIcons name="menu" size={35} style={styles.icon} />
)
}}
/>
</Stack.Navigator>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
height: "100%",
flexDirection: "row",
alignItems: "center"
},
headerTitle: {
fontSize: 24,
color: "#383f42",
letterSpacing: 1
},
icon: {
marginLeft: 10
}
});

try
textAlign:'center'
at the header title styles

Can you see the example here in this expo-snack , there in place of icon ive used text and your header is aligned center.
Hope it helps. feel free for doubts

How to render Image and Text inline using React Native?

How can I get the share icon on the same row as the text?
import React, {Component} from 'react';
import {
ActivityIndicator,
AsyncStorage,
Dimensions,
Image,
ScrollView,
Share,
StatusBar,
StyleSheet,
TouchableOpacity,
View
} from 'react-native';
import {Text} from 'react-native-elements';
import {Button} from 'react-native-share';
import Hyperlink from 'react-native-hyperlink'
import Icon from 'react-native-vector-icons/dist/FontAwesome';
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
const IMAGE_SIZE = SCREEN_WIDTH - 80;
class CustomButton extends Component {
constructor() {
super();
this.state = {
selected: false
};
}
componentDidMount() {
const {selected} = this.props;
this.setState({
selected
});
}
render() {
const {title} = this.props;
const {selected} = this.state;
return (
<Button
title={title}
titleStyle={{fontSize: 15, color: 'white'}}
buttonStyle={selected ? {
backgroundColor: 'rgba(213, 100, 140, 1)',
borderRadius: 100,
width: 127
} : {
borderWidth: 1,
borderColor: 'white',
borderRadius: 30,
width: 127,
backgroundColor: 'transparent'
}}
containerStyle={{marginRight: 10}}
onPress={() => this.setState({selected: !selected})}
/>
);
}
}
class Fonts extends Component {
constructor(props) {
super(props);
this.state = {
...this.state,
selectedIndex: 0,
value: 0.5,
dataSource: null,
isLoading: true,
visible: false
};
this.componentDidMount = this.componentDidMount.bind(this);
}
getNavigationParams() {
return this.props.navigation.state.params || {}
}
componentDidMount() {
if (AsyncStorage.getItem('name')) {
this.setState({'name': AsyncStorage.getItem('name')});
}
return fetch('http://www.koolbusiness.com/newvi/' + this.props.navigation.state.params.id + '.json')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
...this.state,
isLoading: false,
dataSource: responseJson,
fontLoaded: true
}, function () {
});
})
.catch((error) => {
console.error(error);
});
}
onCancel() {
console.log("CANCEL")
this.setState({visible: false});
}
onOpen() {
console.log("OPEN")
this.setState({visible: true});
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
let shareOptions = {
message: 'http://www.koolbusiness.com/newvi/' + this.props.navigation.state.params.id + '.html',
url: 'http://bam.tech',
title: this.state.dataSource.title,
subject: this.state.dataSource.title // for email
};
return (
<View style={{flex: 1}}>
<StatusBar
barStyle="light-content"
/>
{this.state.fontLoaded ?
<View style={{flex: 1, backgroundColor: 'rgba(47,44,60,1)'}}>
<View style={styles.statusBar}/>
<View style={styles.navBar}><TouchableOpacity onPress={() => {
Share.share(shareOptions);
}}>
<View>
<Text> <Icon color="white" name="share-alt" size={42}/></Text>
</View>
</TouchableOpacity>
<Text style={styles.nameHeader}>
{this.state.dataSource.title}
</Text>
</View>
<ScrollView style={{flex: 1}}>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Image
source={{uri: this.state.dataSource.img ? this.state.dataSource.img : "http://www.koolbusiness.com/_/images/icons/electronics_icon.png"}}
style={{width: IMAGE_SIZE, height: IMAGE_SIZE, borderRadius: 10}}
/>
</View>
<View style={{
flex: 1,
flexDirection: 'row',
marginTop: 20,
marginHorizontal: 40,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text style={{flex: 1, fontSize: 26, color: 'white'}}>
{this.state.dataSource.title}
</Text>
</View>
<View style={{flex: 1, marginTop: 20, width: SCREEN_WIDTH - 80, marginLeft: 40}}>
<Text style={{flex: 1, fontSize: 15, color: 'white'}}>
{this.state.dataSource.date}
</Text>
<Hyperlink linkDefault={true}>
<Text style={{flex: 1, fontSize: 15, color: 'white'}} >
{this.state.dataSource.text}
</Text>
</Hyperlink>
</View>
</ScrollView>
</View> :
<Text>Loading...</Text>
}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}, nameHeader: {
color: 'white',
fontSize: 22,
textAlign: 'center'
},
textStyle: {
fontSize: 18,
padding: 10,
},
});
export default Fonts;
It works as expected but I want to render the share icon on the same row as the title text.
Can it be done?

You can use "flexDirection" to 'row' and group share icon along with the title in a view:
<View style={styles.navBar}>
<TouchableOpacity onPress={() => {Share.share(shareOptions); }}>
<View>
<Text>
<Icon color="white" name="share-alt" size={42}/>
</Text>
</View>
</TouchableOpacity>
<Text style={styles.nameHeader}>
{this.state.dataSource.title}
</Text>
</View>
add the below styling to your navBar className :
navBar: {
flex: 1,
flexDirection: 'row'
},
Also, you are using Text and a View in your TouchableOpacity which I think is not needed so I removed those and did a snack on expo similar to your code, please check it here :
https://snack.expo.io/Hk3lrAQ9f