I am very new with react native. I am using a header from react-native-elements in my app. This is my code
<Header
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
/>
I was not able to found any example on how to detect the clicks on the icons and if possible show an extra view. My goal is to achieve something like this :
Do you have any example or sample code?
Write : insted of = , onPress will work
<Header
leftComponent={ {text:'ok',color: '#fff', onPress: () => this.myFunction()}}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
/>
or you can pass your own component like
leftComponent={<MyCustomLeftComponent />}
You have to use onPress instead of onClick.
<Header
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' onPress={() => this.yourFunction} }}
/>
Related
i have read several answers and github posts but non of them working
can anyone tell how can i remove History Button from top header?
tabBarButton is not working it working fine in bottom navigation
<Tab.Navigator
tabBarOptions={{
labelStyle: {fontSize: 12},
style: {backgroundColor: 'blue'},
indicatorStyle: {
// backgroundColor: 'green',
marginLeft: 30,
width: '40%',
paddingTop: 5,
borderTopLeftRadius: 20,
borderTopRightRadius: 26,
},
}}
screenOptions={({route}) => ({
tabBarStyle: {
backgroundColor: 'white',
elevation: 5,
},
tabStyle: {
backgroundColor: 'maroon',
},
})}>
<Tab.Screen name="Open calls" component={OpenCall} />
<Tab.Screen name="My call" component={VolunteerCall} />
<Tab.Screen
name="History"
component={History}
options={{
tabBarButton: () => null,
tabBarLabel: 'History',
}}
/>
</Tab.Navigator>
New to Material-UI and getting spammed with the same error in console after adding the following component.
Full Error:
Material-UI: The key clicked provided to the classes prop is not implemented in ForwardRef(ExpansionPanelSummary).
You can only override one of the following: root,expanded,focused,disabled,content,expandIcon.
const CustomExpansionPanelSummary = withStyles(theme => ({
expandIcon: {
order: -1,
padding: '0',
margin: '17px 0px'
},
clicked:{
color: '#0000FF',
},
unclicked:{
color: '#FF0000',
},
root:{
fontFamily: 'Roboto',
fontSize: '12px',
lineHeight: '1.31',
letterSpacing: '3px',
marginTop: '0px,
marginBottom: '0px,
},
expanded: {
'&$expanded': {
marginTop: '10px',
marginBottom: '10px',
minHeight:0
},
},
}))(ExpansionPanelSummary);
<CustomExpansionPanelSummary
classes ={{
content:(props.clicked ? "customcss":"customcss-name")
}}
expandIcon={<ArrowDropDownIcon
className={props.clicked ? "customcss":"customcss-name"}
/>}
>
{props.clicked} clicked item
</CustomExpansionPanelSummary>
I am trying to make a react full page scroller into my next js app from this link
https://github.com/ibrahim-ih/react-full-page-scroller
I have created an app using npx next-create-app and installed the module using
npm install --save react-full-page-scroller
and added the following code in the index.js page
import React from 'react'
import MyComponent from 'react-full-page-scroller'
import 'react-full-page-scroller/dist/index.css'
const App = () => {
const nav = [
{
id: 1,
title: 'title 1',
className: 'page-nav-button',
style: { width: '100%' }
},
{
id: 2,
title: 'title 2',
className: 'page-nav-button',
style: { width: '100%' }
},
{
id: 3,
title: 'title 3',
className: 'page-nav-button',
style: { width: '100%' }
}
]
const indicatorStyle = {
height: '8px',
width: '8px',
margin: '10px',
borderRadius: '4px',
backgroundColor: 'white',
transition: 'width 500ms ease'
}
const indicatorStyleActive = { width: '20px' }
return (
<MyComponent
pageNav={nav}
indicatorStyle={indicatorStyle}
indicatorStyleActive={indicatorStyleActive}
>
<div
className='bg-blue'
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<h1 className='page-number'>1</h1>
</div>
<div
className='bg-green'
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<h1 className='page-number'>2</h1>
</div>
<div
className='bg-red'
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<h1 className='page-number'>3</h1>
</div>
</MyComponent>
)
}
export default App
This shows the following error
Note I tried the simplest form, which is
wrapping 3 divs in between
It works for the first time as I save it, but as I reload the page the mentioned error shows again.
It looks like react-full-page-scroller is not compatible with SSR, so you'll have to dynamically import it on the client only.
Replace your import MyComponent from 'react-full-page-scroller' with the following lines:
import dynamic from 'next/dynamic'
const MyComponent = dynamic(() => import('react-full-page-scroller'), {
ssr: false
})
import React, { Component } from 'react';
import { View, Text, FlatList, TouchableOpacity, Dimensions, StyleSheet } from 'react-native';
const data = [
{id: 'Music', value: 'Music'},
{id: 'Events', value: 'Events'},
{id: 'About Us', value: 'About Us'},
{id: 'Benefits', value: 'Benefits'},
{id: 'Account', value: 'Account'},
{id: 'Social Media', value: 'Social Media'},
{id: 'FAQ', value: 'FAQ'},
{id: 'Settings', value: 'Settings'}
];
const numColumns = 2;
const size = Dimensions.get('window').width/numColumns;
export const Grid = () => {
return (
<FlatList
style={{ marginTop: 20 }}
data={data}
renderItem={({item}) => (
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.item}>{item.value}</Text>
</TouchableOpacity>
)}
keyExtractor={item => item.id}
numColumns={numColumns} />
);
}
const styles = StyleSheet.create({
itemContainer: {
width: size,
height: size
},
item: {
flex: 1,
margin: 15,
fontSize: 25,
fontWeight: 'bold',
color: 'white',
backgroundColor: 'lightblue'
}
});
I want to be able to center text in both axes
I tried using justifyContent: "center" in the child and parent views but it doesn't work.
textAlign: "center" is able to align the text horizontally.
try like this.
export const Grid = () => {
return (
<FlatList
style={{ marginTop: 20 }}
data={data}
renderItem={({item}) => (
<TouchableOpacity style={styles.itemContainer}>
<View style={styles.item}>
<Text style={styles.itemText}>{item.value}</Text>
</View>
</TouchableOpacity>
)}
keyExtractor={item => item.id}
numColumns={numColumns} />
);
}
const styles = StyleSheet.create({
itemContainer: {
width: size,
height: size
},
item: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 15,
backgroundColor: 'lightblue'
},
itemText: {
fontSize: 25,
textAlign: 'center',
fontWeight: 'bold',
color: 'white',
}
});
Please attach a screenshot, asking questions about designing in react native. Coming to the answer you can try this.
item:{
alignSelf: 'center',
flex: 1,
margin: 15,
fontSize: 25,
fontWeight: 'bold',
color: 'white',
backgroundColor: 'lightblue'
},
itemContainer: {
width: size,
height: size,
justifyContent: 'center',
alignItems: 'center'
},
Your itemContainer class is missing the display: flex property. This is needed to use flexbox properties on the flex items.
I have a react native view i want to style dynamically.
The value of reaction will be sourced from an API, so i want to pass it into my styleheet
const Weather = ({ reaction, temperature }) => {
//const bg = `weatherconditions.${reaction}.color`
return (
<View
style={{ backgroundColor: weatherConditions[reaction].color }}>
The stylesheet looks like this
export const weatherConditions = {
Rain: {
color: '#005BEA',
title: 'Raining',
subtitle: 'Get a cup of coffee',
icon: 'weather-rainy'
},
Clear: {
color: '#f7b733',
title: 'So Sunny',
subtitle: 'It is hurting my eyes',
icon: 'weather-sunny'
},
Thunderstorm: {
color: '#616161',
title: 'A Storm is coming',
subtitle: 'Because Gods are angry',
icon: 'weather-lightning'
},
Clouds: {
color: '#1F1C2C',
title: 'Clouds',
subtitle: 'Everywhere',
icon: 'weather-cloudy'
},
Snow: {
color: '#00d2ff',
title: 'Snow',
subtitle: 'Get out and build a snowman for me',
icon: 'weather-snowy'
},
}
where either Clear, Rain, ThunderStorm can be the value of reaction
I want to dynamically provide the reaction value.
i have tried to do this
const Weather = ({ reaction, temperature }) => {
const bg = `weatherconditions.${reaction}.color`;
return (
<View
style={{ backgroundColor: bg }}
>
and
<View
style={{ backgroundColor: ${bg }}>
But none of them seem to work.
Any help solving this will be appreciated.
Not sure this is what you mean but hope it helps.
const styles = {
weather = reaction => ({
backgroundColor: reaction
})
}
And then in your <View/> tag provide the reaction
...
<View style={StyleSheet.flatten([styles.weather(reaction)])}>
//Your code here
</View>