How change only specific child styles property in react native? - javascript

Code:
<View style={mainContainerStyle}>
<View style={style1}>
{View1}
</View>
<View style={style2}>
{View2}
</View>
<View style={style3}>
{View3}
</View>
<View style={style4}>
{View4}
</View>
</View>
In this case, I want to check: style1, style2, style3, style 4. These are child styling properties.
If I find any style { flexDirection: 'row' }, I should make it 'row-reverse'. How to achieve this? Please help me.

I think you can use a function to do that specific logic
function format(style) {
if (style.flexDirection === 'row') {
return Object.assign({}, style, { flexDirection: 'row-reverse' });
}
return style;
}
and wrap it up:
<View style={mainContainerStyle}>
<View style={format(style1)}>
{View1}
</View>
<View style={format(style2)}>
{View2}
</View>
<View style={format(style3)}>
{View3}
</View>
<View style={format(style4)}>
{View4}
</View>
</View>

Related

How can I collapse Item pressed on arrays - react native?

I have a list of cards,
when pressed to any of them, I want to Increase hight for that card,
So I use layoutAnimation to handle this case because when I use Animated API from RN, I got an error when setNativeDrive "height"
Anyway,
In my case, it increases height for every card in the list,
So how can I solve it?
Code snippet
Live Demo
const OpenedAppointments = ({slideWidth}) => {
const [currentIndex, setCurrentIndex] = React.useState(null);
const [cardHeight, setCardHeight] = useState(140);
const collapseCard = (cardIndex) => {
setCurrentIndex(cardIndex);
currentIndex === cardIndex
? (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
Animated.spring(),
setCardHeight(200))
: (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
Animated.spring(),
setCardHeight(140));
};
const renderItems = (item, index) => {
return (
<TouchableOpacity
delayPressIn={0}
onPress={() => collapseCard(index)}
key={item.id}>
<Animated.View
style={[
styles.itemContainer,
{
height: cardHeight,
},
]}>
<View style={styles.headerContainer}>
<View style={styles.imgContainer}>
<Image
resizeMode="cover"
style={styles.img}
source={{uri: item.vendorInfo.vendorImg}}
/>
</View>
<View style={{width: '80%'}}>
<View style={styles.titleContainer}>
<Text numberOfLines={1} style={styles.vendorName}>
{item.vendorInfo.name}
</Text>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={styles.rateText}>{item.vendorInfo.rate}</Text>
<AntDesign name="star" size={18} color="#262626" />
</View>
</View>
<View style={styles.socialContainer}>
<View
style={{
width: 32,
height: 32,
backgroundColor: '#000',
borderRadius: 5,
}}
/>
</View>
</View>
</View>
<View style={styles.footer}>
<Text style={styles.serviceName}>
{item.serviceName}
</Text>
<Text style={styles.price}>
{item.price}
</Text>
</View>
// this will appeared when pressed to card "Footer Card"
<View>
<View style={styles.line} />
<View style={styles.editFooter}>
<View style={styles.dateContainer}>
<MemoCalender
style={styles.calenderIcon}
size={26}
color="#000"
/>
<View style={styles.dateBox}>
<Text style={styles.dateText}>{item.date}</Text>
<Text style={styles.dateText}>{item.time}</Text>
</View>
</View>
</View>
</View>
</Animated.View>
</TouchableOpacity>
);
};
return(
<>
{Data.opened.map((item, index) => renderItems(item, index))}
</>
);
}
Change this:
<Animated.View
style={[
styles.itemContainer,
{
height: cardHeight,
},
]
>
{...}
</Animated.View>
by
<Animated.View
style={[
styles.itemContainer,
{
height: currentIndex === index ? cardHeight : 140,
},
]
>
{...}
</Animated.View>
If you want to be more efficient, the default height of your card, define it in a constant (ex: const = DEFAULT_CARD_HEIGHT = 140) and use this constant wherever you use 140 as card height

how to handle images from API in a swiper

I installed react-native-swiper and I swipe 3 full screen views and everything is okay, but I have to swipe images from an API, I'll receive images from an API. I dont know how to display it, because the number of images will change everytime I can't put my images in my project
I have to utilize flatList in one view or what ?
return (
<View style={styles.container}>
<Swiper autoplay={true} loop={true} style={styles.wrapper} showsButtons={true}>
<View style={styles.slide1}>
<Text style={styles.text}>Dima Arcol 1</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Dima Arcol 2</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>Dima Arcol 3</Text>
</View>
</Swiper>
<View style={styles.myButtunContainer}>
<MyLButton/>
</View>
</View>
);
You can iterate over your data using map.
lets say your data is
data = [
{
text: 'imageheading',
image: 'yoururl'
},
...
];
return (
<View style={styles.container}>
<Swiper autoplay={true} loop={true} style={styles.wrapper} showsButtons={true}>
{this.data.map((data) => {
return(
<View style={styles.slide3}>
<Text style={styles.text}>{data.text}</Text>
<Image src={{ uri: data.image }}/>
</View>
);
})}
</Swiper>
<View style={styles.myButtunContainer}>
<MyLButton/>
</View>
</View>
);

React Native ScrollView disappears child component

I have this code:
<View style={{flex:1}}>
<ScrollView>
<View style={{flex:0.25,elevation:2,marginVertical:5}}>
<MoviesChild/>
</View>
<View style={{flex:0.75}}>
<FlatList
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
/>
</View>
</ScrollView>
</View>
The problem is, my FlatList's data appears but my child component MoviesChild disappears. Maybe Flatlist overlaps the child component. Could someone figure out where I'm doing a mistake please?
You should give style to ScrollView with flexGrow:1
I suggest you not to use FlatList inside a ScrollView, 'cause FlatList scroll itself. So, in order to achieve your objective, wrap your first View in a function and pass it to the ListHeaderComponent property of your FlatList, like this:
<View style={{flex:1}}>
<View style={{flex:0.75}}>
<FlatList
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
ListHeaderContainer={this.renderHeader}
/>
</View>
</View>
where
private renderHeader = () => {
return(
<View style={{flex:0.25,elevation:2,marginVertical:5}}>
<MoviesChild/>
</View>
)
}
I hope this can fix your issue!
You can find what I'm talking about on the official doc
Try this,
<View style={{flex:1}}>
<View style={{ flex:0.25,elevation:2,marginVertical:5 }}>
<MoviesChild/>
</View>
<FlatList
style={{flex:0.75}}
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
/>
</View>

React Native - Navigation from another file

So, I'm using 2 files: The components.js where I define all parts and molds I'll use in my app, and the App.js, which has the logic and major stuff.
To sum things up, I've defined a Card class in the components.js that has a button at the end. Here is the code for the Card:
export class Card extends Component {
render() {
return (
<View style={{height: 700}}>
<View style={{flex: 8, backgroundColor: 'white', borderRadius: 20}} >
<Image source={{uri: this.props.pic}} style={styles.img}/>
<Text style={{flex: 1, fontWeight: 'bold',fontSize: 30, paddingTop: 10}}> {this.props.nome}</Text>
<Text style={{flex: 1, fontSize: 20}}> {this.props.descricao}</Text>
<TouchableHighlight style={{flex: 1}} onPress={() => ???????} underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>Mais informações</Text>
</View>
</TouchableHighlight>
</View>
</View>
);
}
}
And I use it in the App.js as follows:
import {Card} from "./components.js";
class App extends Component {
render() {
return (
<View style={{flex: 1, backgroundColor:"#e6e6e1"}}>
<ScrollView>
{this.state.locations.map((pico, key) =>
<Card key={key} pic={pico.img[0]} nome= {pico.nome_do_pico} descricao={pico.how}/>
)}
</ScrollView>
</View>
);
}
}
(I've omitted the parts where it gets the info from the server and puts into the locations array)
What I need is for the button to navigate to another screen, called "Details", and I have tried a few things on the onPress but nothing has worked so far. The documentation for reactnavigation uses this.state.navigation.navigate("Details") as example, but since the Card is in another file it can't access the this.state.navigation. Any ideas?
Try if you can solve the problem by modifying the following part of your code:
in app.js
<Card key={key} pic={pico.img[0]} nome= {pico.nome_do_pico} descricao={pico.how} navigation={navigation}/>
in components.js:
<TouchableHighlight style={{flex: 1}} onPress={() => navigation.navigate('Details', {YourParameters: xx } } underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>Mais informações</Text>
</View>
</TouchableHighlight>

Display header containing 3 columns in ListView

I am completely new to react native and am creating an application where I need to display items in a ListView.My ListView consists of 3 columns namely, author, title, price i.e. each row in ListView displays these three columns.Currently I am able to display only one column both in header section and the content section as
_renderRow(rowData){
return (
<View>
<Text style={styles.row}> {rowData.title}</Text>
</View>
)
},
_renderHeader(){
return (
<View style={styles.sectionDivider}>
<Text style={styles.headingText}>
Title
</Text>
</View>
)
},
And my render function is as
render() {
return(
<View style={styles.container}>
<ActivityIndicatorIOS
animating={this.state.isLoading}
size="large">
</ActivityIndicatorIOS>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
renderHeader={this._renderHeader}
/>
</View>
)
}
So, I want to render 3 columns both in header as well as in content section.I googled it but could not find any relevant content.
Easily creating columns can be done with the flexbox style properties. For example:
_renderRow(rowData){
return(
<View styles={styles.flexRow}>
<Text>{rowData.title}</Text>
<Text>{rowData.author}</Text>
<Text>{rowData.price}</Text>
</View>
)
_renderHeader() {
return(
<View styles={styles.flexRow}>
<Text>Title</Text>
<Text>Author</Text>
<Text>Price</Text>
</View>
)
}
var styles = StyleSheet.create({
flexRow: {
flex: 1,
flexDirection: 'row' <---- This is the important style property
},
})
I created a snippet at https://rnplay.org/apps/p5hzcg if you want to play around with a working example.
you should try to modify your code with something like
_renderRow(rowData){
return (
<View>
<Text style={styles.column1}> {rowData.text1}</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column2}> {rowData.text2}</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column3}> {rowData.text3}</Text>
</View>
)
},
_renderHeader(){
return (
<View>
<Text style={styles.column1}>textColumm1</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column2}>textColumm2</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column3}>textColumm2</Text>
</View>
)
},
in this way each line will have 3 elements with same style, and if you fix the width of them it'll be exactly like columns.
Embedding text could alter the width value, so you have to decide what to do if the text is too long. So mostly deciding if to resize the text or going multiline.

Categories