I have problem on css of react native, I don't know how can I implement 2 icon connect with dash, Really don't know what this called on react native, is this stepper?. I already have sample component, the main problem is how to achieve this dashes with icons.
Here is the the example:
My Actual Output:
Sample Code:
<View style={{ justifyContent: 'flex-end', flex: 1, padding: 20 }}>
<Card style={{ justifyContent: 'center', borderRadius: 20, elevation:4}}>
<CardItem>
<Left>
<Body>
<View style={{flexDirection:'row', padding:20}}>
<View style={{flexDirection:'row'}}>
</View>
<View style={{flexDirection:'column',flex:1}}>
<Text style={{alignSelf:'center', color:'#000', fontWeight:'bold', fontSize:17}} adjustsFontSizeToFit numberOfLines={2}>Pick Up Request {'\n'}</Text>
<Item inlineLabel last>
<Text style={{fontSize:14}}>US Rt 11, Evans Mills NY 13637. 901 Route 110 </Text>
</Item>
<Text>{'\n'}</Text>
<Item inlineLabel last>
<Text style={{fontSize:14}}>Farmingdale NY 11735. 2400 Route 9{'\n'}</Text>
</Item>
</View>
</View>
<View style={{flexDirection:'row'}}>
<View style={{flexDirection:'row',flex:1, justifyContent:'space-around'}}>
<Button small primary title="Message" >
<Text>Message</Text>
</Button>
<Button small warning title="Fetch" >
<Text>Fetch</Text>
</Button>
<Button small light title="Cancel" >
<Text>Cancel</Text>
</Button>
</View>
</View>
</Body>
</Left>
</CardItem>
</Card>
</View>
Working Example: Expo Snack
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Card, CardItem, Item, Left, Body, Button } from 'native-base';
export default function App() {
return (
<View style={styles.container}>
<View style={{ justifyContent: 'flex-end', flex: 1, padding: 20 }}>
<Card
style={{ justifyContent: 'center', borderRadius: 20, elevation: 4 }}>
<CardItem>
<Left>
<Body>
<View style={{ flexDirection: 'row', padding: 20 }}>
<View
style={{
flexDirection: 'column',
flex: 1,
justifyContent: 'space-between',
}}>
<View
style={{
position: 'absolute',
left: -25,
top: 50,
zIndex: 200,
}}>
<DotTrail />
</View>
<Text
style={{
alignSelf: 'center',
color: '#000',
fontWeight: 'bold',
fontSize: 17,
}}
adjustsFontSizeToFit
numberOfLines={2}>
Pick Up Request {'\n'}
</Text>
<Item inlineLabel last>
<Text style={{ fontSize: 14 }}>
US Rt 11, Evans Mills NY 13637. 901 Route 110{' '}
</Text>
</Item>
<Text>{'\n'}</Text>
<Item inlineLabel last>
<Text style={{ fontSize: 14 }}>
Farmingdale NY 11735. 2400 Route 9{'\n'}
</Text>
</Item>
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<View
style={{
flexDirection: 'row',
flex: 1,
justifyContent: 'space-around',
}}>
<Button small primary title="Message">
<Text>Message</Text>
</Button>
<Button small warning title="Fetch">
<Text>Fetch</Text>
</Button>
<Button small light title="Cancel">
<Text>Cancel</Text>
</Button>
</View>
</View>
</Body>
</Left>
</CardItem>
</Card>
</View>
</View>
);
}
function DotTrail() {
return (
<>
<Dot radius={10} color={'green'} />
<View>
<Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
<Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
<Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
</View>
<Dot radius={10} color={'red'} />
</>
);
}
function Dot({ color, radius, backgroundColor = null, margin }) {
return (
<View
style={{
width: radius * 2,
height: radius * 2,
borderWidth: 2,
borderColor: color,
borderRadius: radius,
marginRight: 10,
alignSelf: 'center',
backgroundColor: backgroundColor,
margin: margin,
}}></View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
marginBottom: 3,
},
});
I'll show you how u can make it from scratch:
Just replace your icon with these simple characters i did use here!
const MyCustomInputs = ({message, duration}) => {
const [showNotification, setShowNotification] = React.useState(false)
return (
<div style={{position:"relative",width:200, height:50, display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
<div style={{width:200,display:"flex", justifyContent:"space-between"}}>
<MyInputIcon color="orange"/>
<input type="text"/>
</div>
<MyDashes content={"..."}/>
<div style={{width:200,display:"flex", justifyContent:"space-between"}}>
<MyInputIcon color="green"/>
<input type="text"/>
</div>
</div>
)
}
const MyInputIcon = ({color}) => <div style={{color}}>O</div>
const MyDashes = ({content}) => <div style={{position:"absolute",top:17,left:1,writingMode: "vertical-rl"}}>{content}</div>
ReactDOM.render(
<MyCustomInputs />
,document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
Related
I have a react native project. I currently have a bar that I made which has a text input and view selector. The view selector is small and the text nput is currently small. I dont want anything to change but I want the textInput to fill the empty white space between the input and the view selector dynamically.
here is the my code:
import React, { useState } from 'react'
import { Text, View, StyleSheet, TextInput } from 'react-native'
import { Feather } from '#expo/vector-icons'
const SearchAndFilterComponent = () => {
const [search, setSearch] = useState()
return (
<View style={styles.container}>
<View style={styles.bar}>
<View style={styles.searchContainer}>
<View style={styles.search}>
----------------------------------------------------------------------------------
<View style={styles.searchIconContainer}>
<Feather style={styles.searchIcon} name='search' color={'#273be2'} size={24} />
</View>
<View style={styles.searchInputContainer}>
<TextInput style={styles.searchInput} value={search} onChange={setSearch} placeholder={'search'}/>
</View>
----------------------------------------------------------------------------------
</View>
<View style={styles.navigationContainer}>
<Feather name='navigation' color={'#273be2'} size={24} />
</View>
</View>
<View style={styles.mapContainer}>
<View style={styles.splitter}></View>
<Feather style={styles.buttonIcon} name='map' color={'#273be2'} size={24} />
<Text style={styles.text}>Map</Text>
</View>
</View>
<View style={styles.bar}>
<View style={styles.sorfAndFilter}>
<View style={styles.buttonContainer}>
<Feather name='filter' color={'#273be2'} size={24} />
<Text style={styles.text}>Filter</Text>
</View>
<View style={styles.buttonContainer}>
<Feather name='sliders' color={'#273be2'} size={24} />
<Text style={styles.text}>Sort</Text>
</View>
</View>
<View style={styles.buttonContainer}>
<Feather name='download' color={'#273be2'} size={24} />
<Text style={styles.text}>Save</Text>
</View>
</View>
<View style={styles.bar}>
<View>
<Text style={styles.text}>Results: "Palm Springs, CA"</Text>
</View>
<View>
<Text style={styles.text}>2,345 Properties</Text>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
width: '100%',
marginTop: 50
},
bar: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between'
},
searchContainer: {
display: 'flex',
flexDirection: 'row'
},
search: {
display: 'flex',
flexDirection: 'row'
},
splitter: {
height: 20,
width: 2,
backgroundColor: 'lightgrey',
marginHorizontal: 8
},
mapContainer: {
display: 'flex',
flexDirection: 'row'
},
sorfAndFilter: {
display: 'flex',
flexDirection: 'row'
},
buttonContainer: {
display: 'flex',
flexDirection: 'row'
},
searchInputContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch'
},
searchInput: {
fontSize: 17,
borderBottomWidth: 2,
borderBottomColor: 'grey',
alignItems: 'stretch'
},
text: {
fontSize: 17
},
buttonIcon: {
marginRight: 4
}
})
export default SearchAndFilterComponent
Here is an image:
Use flexbox.
Here is an example with tailwind css.
<View
style={[
tw`flex flex-row items-center mx-1 mb-1 rounded-full`,
{ backgroundColor: "#2E2E2E" },
]}
>
<TextInput
style={[
tw`m-0 p-0 px-4 py-3 flex-grow text-white text-lg`,
{},
]}
placeholder="Type message here ..."
placeholderTextColor="#777"
/>
<Icon
name="send"
type="material"
size={20}
color="white"
style={[
tw`rounded-full p-3 mr-1`,
{ backgroundColor: "#B50055", opacity: 1 },
]}
/>
</View>
The idea is to use flexbox on the View and flex-grow on the TextInput.
The rest of the stuff will take the least space.
I am trying to write a signup form and its loading screen modal.
For some reason the modal is not vertically and horizontally align
<View style={{flex: 1,flexDirection: 'column',alignItems: 'center'}}>
<View>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<TouchableOpacity style={styles.button} onPress={() => alert('hello')}>
<Text style={styles.button_text}>CREATE YOUR NEW ACCOUNT</Text>
</TouchableOpacity>
</View>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<View
style={{width: 300, height: 300, backgroundColor: 'red'}}></View>
</Modal>
</View>
</View>
Can someone help please, here is how current situation is,
I want the modal to horizontally and vertically align in the screen
Try this
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View style={{width: 300, height: 300, backgroundColor: 'red'}}>
...other components you need
</View>
</View>
</Modal>
there are four buttons how to change the color of the active one being press and change it back to normal if the other button is pressed
i tried this
state = { active: styles.btn };
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
<View style={{ padding: 10 }}>
<TouchableOpacity onPress={() => {this.setState({ active: styles.btnActive })}}
style={this.state.active}>
<Text> town </Text>
</TouchableOpacity>
</View>
<View style={{ padding: 10 }}>
<TouchableOpacity onPress={() => {this.setState({ active: styles.btnActive })}}
style={this.state.active}>
<Text> hill </Text>
</TouchableOpacity>
</View>
<View style={{ padding: 10 }}>
<TouchableOpacity onPress={() => {this.setState({ active: styles.btnActive })}}
style={this.state.active}>
<Text> street </Text>
</TouchableOpacity>
</View>
<View style={{ padding: 10 }}>
<TouchableOpacity onPress={() => {this.setState({ active: styles.btnActive })}}
style={this.state.active}>
<Text> road </Text>
</TouchableOpacity>
</View>
</View>
const styles = StyleSheet.create({
btn: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
borderColor: '#dc00ff',
borderRadius: 10,
borderWidth: 1,
padding: 10,
},
btnActive: {
alignItems: 'center',
backgroundColor: '#dc00ff',
borderColor: '#dc00ff',
borderRadius: 10,
borderWidth: 1,
padding: 10,
},
});
but instead all the buttons color are changing when one button is press
In React, whenever you do a this.setState() call the component get re-rendered. You buttons are looking to this.state.active for their styles, so whenever one button is pressed, the your this.state.active is getting updated to the btnActive styles you are passing it. I would recommend that you give each button an index so that you can distiguish between the buttons more easily.
Fair warning the code below is pretty static. If you need to make this more dynamic (say you want to generate buttons based on a list or something) you'd have to use map or a for loop, but the indexing idea would remain the same.
state = { active: null };
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
<View style={{ padding: 10 }}>
<TouchableOpacity
onPress={() => {this.setState({ active: 0 })}}
style={this.state.active === 0 ? style.btnActive : style.btn }>
<Text> town </Text>
</TouchableOpacity>
</View>
<View style={{ padding: 10 }}>
<TouchableOpacity
onPress={() => {this.setState({ active: 1 })}}
style={this.state.active === 1 ? style.btnActive : style.btn }>
<Text> town </Text>
</TouchableOpacity>
</View>
<View style={{ padding: 10 }}>
<TouchableOpacity
onPress={() => {this.setState({ active: 2 })}}
style={this.state.active === 2 ? style.btnActive : style.btn }>
<Text> town </Text>
</TouchableOpacity>
</View>
<View style={{ padding: 10 }}>
<TouchableOpacity
onPress={() => {this.setState({ active: 3 })}}
style={this.state.active === 3 ? style.btnActive : style.btn }>
<Text> town </Text>
</TouchableOpacity>
</View>
</View>
The issue is that your code is using the state.active style for every button. What I'd do is store the active button index, or key, in state and then switch on that state to decide which style to use.
Life example: https://snack.expo.io/B1mPipDwr
state = {activeIndex: 0};
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
<View style={{ padding: 10 }}>
<TouchableOpacity onPress={() => {this.setState({ activeIndex: 0 })}}
style={this.state.activeIndex === 0 ? styles.btnActive : styles.btn}>
<Text> town </Text>
</TouchableOpacity>
</View>
<View style={{ padding: 10 }}>
<TouchableOpacity onPress={() => {this.setState({ activeIndex: 1 })}}
style={this.state.activeIndex === 1 ? styles.btnActive : styles.btn}>
<Text> hill </Text>
</TouchableOpacity>
</View>
<View style={{ padding: 10 }}>
<TouchableOpacity onPress={() => {this.setState({ activeIndex: 2 })}}
style={this.state.activeIndex === 2 ? styles.btnActive : styles.btn}>
<Text> street </Text>
</TouchableOpacity>
</View>
<View style={{ padding: 10 }}>
<TouchableOpacity onPress={() => {this.setState({ activeIndex: 3 })}}
style={this.state.activeIndex === 3 ? styles.btnActive : styles.btn}>
<Text> road </Text>
</TouchableOpacity>
</View>
</View>
const styles = StyleSheet.create({
btn: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
borderColor: '#dc00ff',
borderRadius: 10,
borderWidth: 1,
padding: 10,
},
btnActive: {
alignItems: 'center',
backgroundColor: '#dc00ff',
borderColor: '#dc00ff',
borderRadius: 10,
borderWidth: 1,
padding: 10,
}
});
i want to achieve the following:
i am using a module called react-native-easy-grid
the whole thing is wrapped inside a Grid
with:
blue line being Col
red line being Row
orange line being View
here's my code so far:
<Grid>
<Col>
<Thumbnail circular source={selectedChildAvatar} />
</Col>
<Col size={4}>
<Row style={{ flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-evenly' }}>
{/* name, in review */}
<View>
{!_.isEmpty(selectedChild) && <Text>{selectedChild.firstName}</Text>}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<Text note>In review: {inReviewCount <= 0 && 0}</Text>
{inReviewCount > 0 && (
<View
style={{
backgroundColor: 'red',
paddingLeft: 4,
paddingRight: 4,
borderRadius: 50
}}>
<Text note>10</Text>
</View>
)}
</View>
</View>
{/* earnings, penalties */}
<View>
{/* earnings */}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<ProgressiveImage
resizeMode='cover'
imageStyle={styles.badge}
style={styles.badge}
source={images.icon.earnings}
/>
<Text style={[styles.digits, styles.earningDigits]}>12</Text>
</View>
{/* penalties */}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<ProgressiveImage
resizeMode='cover'
imageStyle={styles.badge}
style={styles.badge}
source={images.icon.penalties}
/>
<Text style={[styles.digits, styles.penaltyDigits]}>12</Text>
</View>
</View>
{/* review button */}
<View style={{ marginVertical: 10 }}>
<Button
small
iconRight
primary
block
disabled={inReviewCount === 0}>
<Text>Review</Text>
<Icon name='arrow-forward' />
</Button>
</View>
</Row>
</Col>
</Grid>
but this is what im getting:
what approach would it be to stretch the wrapped button to 100% of the width?
thank you!
use flex or set width to 100%
<View style={{ marginVertical: 10, flex: 1 }}>
<Button
small
iconRight
primary
block
disabled={inReviewCount === 0}>
<Text>Review</Text>
<Icon name='arrow-forward' />
</Button>
</View>
I am currently trying to implement a kind of 'statistics' overlay page.
I have the following code so far:
<View style={styles.container}>
<MapView
style={styles.map}
...
>
<MapView.Polygon
...
>
</MapView.Polygon>
<MapView.Marker coordinate={{latitude: 47.366965, longitude: 8.545102}}>
<View style={styles.radius}>
<View style={styles.marker}></View>
</View>
</MapView.Marker>
**THIS PART**
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', bottom: 0}}>
<View style={{width: 100, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 100, height: 50, backgroundColor: 'steelblue'}} />
</View>
**THIS PART**
</MapView>
<Fab
direction="up"
containerStyle={{ marginLeft: 10 }}
style={{ backgroundColor: '#5067FF' }}
position="bottomRight">
</Fab>
</View>
Now the three containers I get are at the top; how can I focus them to the bottom?