Develop Reference

How to do this calendar circular swipe scroll with 3 texts

Here is my model.
I would like this animation :
When I swipe left, the month March takes the central place, and April replaces March in the right
When I swipe right, the month January takes central place, and December replaces January in the left
I literally don't know where to begin, or how to achieve this.
For the code used in the image, here it is :
import React from 'react';
import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
const MonthSlider = () => {
return (
<View
style={{
flexDirection: 'row',
flex: 0.2,
paddingBottom: 100,
}}>
<View
style={{
flexDirection: 'column',
flex: 0.25,
alignItems: 'center',
marginTop: 10,
}}>
<TouchableOpacity
style={{alignItems: 'center'}}
onPress={() => alert('January clicked')}>
<View style={styles.nonActiveCircle} />
<Text style={styles.nonActiveMonth}>January</Text>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: 'column',
flex: 0.5,
alignItems: 'center',
marginTop: 10,
}}>
<View style={styles.activeCircle} />
<Text style={styles.year}>2021</Text>
<Text style={styles.activeMonth}>February</Text>
</View>
<View
style={{
flexDirection: 'column',
flex: 0.25,
marginTop: 10,
alignItems: 'center',
}}>
<TouchableOpacity
style={{alignItems: 'center'}}
onPress={() => alert('March clicked')}>
<View style={styles.nonActiveCircle} />
<Text style={styles.nonActiveMonth}>March</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
nonActiveMonth: {
fontSize: 20,
color: '#8BA8C3',
fontWeight: 'bold',
},
activeMonth: {
fontSize: 30,
color: 'white',
fontWeight: 'bold',
},
nonActiveCircle: {
width: 8,
height: 8,
borderRadius: 8 / 2,
backgroundColor: '#8BA8C3',
marginTop: 10,
},
activeCircle: {
width: 25,
height: 25,
borderRadius: 25 / 2,
backgroundColor: 'white',
borderWidth: 5,
borderColor: '#175287',
bottom: 20,
marginBottom: -20,
},
year: {
fontSize: 20,
color: '#8BA8C3',
},
});
export default MonthSlider;

Maybe a good start would be use 'react-view-slider' or 'ScrollView' and do something like this :
import React, { useState } from 'react';
import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
import Swiper from 'react-native-swiper';
const MonthSlider = () => {
// Months
const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
// State iMonths
const [ iMonth, setIMonth ] = useState(1);
// Month click
const MonthClick = (i) => {
alert( months[i] +' clicked')
setIMonth(i);
};
// This function renders the view at the given index.
const renderView = ({ index, active }) => (
months.map( (month,i) =>
<View key={i} style={styles.month + ( active == i ) ? styles.active : styles.inactive }>
<TouchableOpacity
style={styles.bt}
onPress={() => MonthClick(i)}
>
<View style={ active == i ? styles.activeCircle : styles.nonActiveCircle } />
<Text style={ active == i ? styles.activeMonth : styles.nonActiveMonth }>{month}</Text>
</TouchableOpacity>
</View>
)
);
return (
<Swiper style={styles.monthWrapper} showsButtons={false} horizontal={true} showsPagination={false}>
{renderView(0,0)}
</Swiper>
);
};
const styles = StyleSheet.create({
/* New styles */
monthWrapper:{
flex:0.5,
display:'flex',
flexDirection: 'row',
height:'100px',
textAlign:'center',
},
bt:{
textAlign:"center"
},
month:{
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
active:{
color:'#000',
flex: 0.5,
opacity:1,
fontSize: 30,
color: 'white',
fontWeight: 'bold',
},
inactive: {
fontSize: 20,
color: '#8BA8C3',
fontWeight: 'bold',
},
/* Old styles */
nonActiveMonth: {
fontSize: 20,
color: '#8BA8C3',
fontWeight: 'bold',
},
activeMonth: {
fontSize: 30,
color: 'white',
fontWeight: 'bold',
},
nonActiveCircle: {
width: 12,
height: 12,
borderRadius: '100%',
backgroundColor: '#8BA8C3',
marginTop: 10,
alignSelf:'center'
},
activeCircle: {
width: 40,
height: 40,
borderRadius: '100%',
backgroundColor: 'white',
borderWidth: 5,
borderColor: '#175287',
bottom: 20,
marginBottom: -20,
},
});
export default MonthSlider;

How can I achieve to have active pointy/arrow/triangle tabs on React Native?

It seems to be as if I need to use some extra css in order to achieve what you will see below:
I already have this component:
renderTabBar = props => (
<View style={tabViewStyles.tabBar}>
{props.navigationState.routes.map((route, i) => {
return (
<TouchableOpacity
key={route.key}
style={[
tabViewStyles.tabItem,
tabViewStyles.tabStyle,
tabViewStyles[`tabStyle_${i}`],
]}
onPress={() => this.setState({ index: i })}
>
<Text style={{ color: '#ffffff', fontFamily: 'montserratBold' }}>
{route.title}
</Text>
</TouchableOpacity>
);
})}
</View>
);
With this css on StyleSheet:
container: {
flex: 1,
},
tabBar: {
flexDirection: 'row',
paddingTop: Constants.statusBarHeight,
},
onWhite: {
color: globalStyles.whiteColor.color,
backgroundColor: globalStyles.whiteColor.backgroundColor,
},
bolderFont: {
fontFamily: 'montserratBold',
},
tabItem: {
flex: 1,
alignItems: 'center',
padding: 26,
},
tabStyle: {
marginHorizontal: 10,
marginTop: 20,
borderRadius: 2,
},
tabStyle_0: {
backgroundColor: '#ff5252',
},
tabStyle_1: {
backgroundColor: '#3da7dc',
},
});
With that above I get this:
So I am still missing the pointy part of the tab.
What else do I need to do?

You can use rotate property of Transforms as described here.
Minimal example:
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<View style={{width:50,height:50,backgroundColor:'green'}}></View>
<View style={{transform:[{rotateZ:'45deg'}],width:8,height:8,backgroundColor:'green',marginTop:-4}}></View>
</View>
Snack example here

If you want a pure styled solution and not an image you could do the following:
const triangle = {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 50,
borderRightWidth: 50,
borderBottomWidth: 100,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#ff5252',
transform: [
{rotate: '180deg'}
]
}
const Triangle = React.createClass({
render: function() {
return (
<View style={[triangle, this.props.style]} />
)
}
})
Modified from https://codedaily.io/tutorials/22/The-Shapes-of-React-Native.

how to centre the image inside a view in react native

I have a grid view, inside each cell I have added a view and then an image , the image isn't centered the code is as follows
<ImageBackground
source={require('./images/marble.jpg')}
style={styles.backgroundImage}>
<GridView
itemDimension={130}
items={items}
style={styles.gridView}
renderItem={item => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<View style={styles.CircleShapeView}>
<Image style={styles.iconItem} source={item.name}/>
</View>
</View>
)}
/>
</ImageBackground>
and styles are
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
},
CircleShapeView: {
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: '#00BCD4'
},
gridView: {
paddingTop: 50,
flex: 1,
},
itemContainer: {
justifyContent: 'center',
alignItems:'center',
height:130
},
iconItem: {
alignItems:'center',
justifyContent: 'center'
}
});
the output looks like this
Image should be at the centre of the circle, but its not.

Your image is inside a view 'CircleShapeView'
CircleShapeView: {
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: '#00BCD4',
justifyContent: 'center',
alignItems: 'center'
}

set in view
justifycontent:center
alignitems:center

react native can't set 100% width on children element

I want each item to be 100% width. Adding alignSelf: 'stretch', to the style block dose not work.
Please check out the pictures below!
How it looks
How it should look
My code:
<View>
<ButtonNav style={
this.state.currentTab == 'order'
? styles.currentTab
: styles.tabItem
}
onPress={this.order}
tagline="BESTÄLLNING" />
</View>
const styles = StyleSheet.create({
navWrapper: {
flexDirection: 'row',
height: 75,
alignItems: 'center',
backgroundColor: '#949494',
flex: 1
},
tabItem: {
justifyContent: 'center',
borderWidth: 2,
borderColor: '#333333',
flexGrow: 1,
flex: 1
},
currentTab: {
backgroundColor: '#EEEEEE',
justifyContent: 'center',
flexGrow: 1,
borderTopWidth: 2,
borderTopColor: '#333333',
flex: 1
}
});

The problem is that you're having a View parent without flex to the flexxed ButtonNav, so your flexs are being ignored, you can fix it by removing the <View> tags, if you need them for some reason, just add a flex style attribute to it, i think this might work:
<View style={{flex:1}}>
<ButtonNav
style={
this.state.currentTab == 'order'
? styles.currentTab
: styles.tabItem
}
onPress={this.order}
tagline="BESTÄLLNING" />
</View>

const styles = StyleSheet.create({
navWrapper: {
flexDirection: 'row',
height: 75,
alignItems: 'center',
backgroundColor: '#949494',
justifyContent: 'center'
},
tabItem: {
borderWidth: 2,
borderColor: '#333333',
flexGrow: 1,
flex: 1,
},
currentTab: {
backgroundColor: '#EEEEEE',
flexGrow: 1,
borderTopWidth: 2,
borderTopColor: '#333333',
flex: 1
}
})
try this it should work

How do make textinput background transparent on map on react-native

How can I make the outer textinput background transparent so that it look like its inside the map, not on top? Thanks in advance!
<View style={styles.container}>
<TextInput style={styles.input}/>
<MapView style={styles.map}/>
</View>
var styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex: 1,
},
input: {
height: 36,
padding: 10,
margin: 18,
fontSize: 18,
borderWidth: 1,
borderRadius: 10,
borderColor: '#48BBEC',
backgroundColor: 'rgba(0,0,0,0)',
}
})

Finally got it answer! Thanks to jpea!
<View style={styles.container}>
<MapView style={styles.map}/>
<View style={styles.inputView}>
<TextInput style={styles.input}/>
</View>
</View>
var styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex: 1,
},
inputView: {
backgroundColor: 'rgba(0,0,0,0)',
position: 'absolute',
top: 0,
left: 5,
right: 5
},
input: {
height: 36,
padding: 10,
marginTop: 20,
marginLeft: 10,
marginRight: 10,
fontSize: 18,
borderWidth: 1,
borderRadius: 10,
borderColor: '#48BBEC',
backgroundColor: 'white',
}
})

Try wrapping your text input in another view and setting that view's background to transparent:
<View style={styles.container}>
<MapView style={styles.map}/>
<View style={styles.inputWrapper}>
<TextInput style={styles.inputSearch}/>
</View>
</View>
inputWrapper: {
flex: 1,
backgroundColor: 'transparent',
position: 'absolute',
top: 0,
},
inputSearch: {
backgroundColor: 'rgba(0,0,0,0.4)', // 40% opaque
color: 'white',
}