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;
Related
I'm new to React native, I'm creating a online store app my problem is : when the person selects a repeated item it does not appear in the cart it just updates , I would like it to include and list in the cart this repeated item ... as I said I'm new to react native, but I believe the problem is in the listing and not in the register ...
Function add in cart in AddCart.js
const addToCart = async (id) => {
let itemArray = await AsyncStorage.getItem('cartItems');
itemArray = JSON.parse(itemArray);
if (itemArray) {
let array = itemArray;
array.push(id);
try {
await AsyncStorage.setItem('cartItems', JSON.stringify(array));
ToastAndroid.show(
'Item Added Successfully to cart',
ToastAndroid.SHORT,
);
navigation.navigate('Home');
} catch (error) {
return error;
}
} else {
let array = [];
array.push(id);
try {
await AsyncStorage.setItem('cartItems', JSON.stringify(array));
ToastAndroid.show(
'Item Added Successfully to cart',
ToastAndroid.SHORT,
);
navigation.navigate('Home');
} catch (error) {
return error;
}
}
};
MyCart.js
import React, {useState, useEffect} from 'react';
import {
View,
Text,
TouchableOpacity,
Image,
Alert
} from 'react-native';
import AsyncStorage from '#react-native-async-storage/async-storage';
const MyCart = ({navigation}) => {
const [product, setProduct] = useState();
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
getDataFromDB();
});
return unsubscribe;
}, [navigation]);
const getDataFromDB = async id =>{
let items = await AsyncStorage.getItem('cartItems');
items = JSON.parse(items);
if(items.length===0){
Alert.alert(
"Ops",
"The cart is empty",
[
{
text: "Ok",
onPress: () => navigation.navigate('Home'),
style: "cancel"
}
]
);
}else{
let productData = [];
if (items) {
Items.forEach(data => {
if (items.includes(data.id)) {
productData.push(data);
return;
}
});
setProduct(productData);
getTotal(productData);
} else {
setProduct(false);
getTotal(false);
}
}
};
const renderProducts = (data, index) => {
return (
<TouchableOpacity
key={data.key}
onPress={() => navigation.navigate('ProductInfo', {productID: data.id})}
style={{
width: '100%',
height: 100,
marginVertical: 6,
flexDirection: 'row',
alignItems: 'center',
}}>
<View
style={{
width: '30%',
height: 100,
padding: 14,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLOURS.backgroundLight,
borderRadius: 10,
marginRight: 22,
}}>
<Image
source={data.productImage}
style={{
width: '100%',
height: '100%',
resizeMode: 'contain',
}}
/>
</View>
<View
style={{
flex: 1,
height: '100%',
justifyContent: 'space-around',
}}>
<View style={{}}>
<Text
style={{
fontSize: 14,
maxWidth: '100%',
color: COLOURS.black,
fontWeight: '600',
letterSpacing: 1,
}}>
{data.productName},
</Text>
<View
style={{
marginTop: 4,
flexDirection: 'row',
alignItems: 'center',
opacity: 0.6,
}}>
<Text
style={{
fontSize: 14,
fontWeight: '400',
maxWidth: '85%',
marginRight: 4,
}}>
R$ {data.productPrice2}.00 , {data.id}
</Text>
<Text>
</Text>
</View>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<View
style={{
borderRadius: 100,
marginRight: 20,
padding: 4,
borderWidth: 1,
borderColor: COLOURS.backgroundMedium,
opacity: 0.5,
}}>
<MaterialCommunityIcons
name="minus"
style={{
fontSize: 16,
color: COLOURS.backgroundDark,
}}
/>
</View>
<Text>1</Text>
<View
style={{
borderRadius: 100,
marginLeft: 20,
padding: 4,
borderWidth: 1,
borderColor: COLOURS.backgroundMedium,
opacity: 0.5,
}}>
<MaterialCommunityIcons
name="plus"
style={{
fontSize: 16,
color: COLOURS.backgroundDark,
}}
/>
</View>
</View>
<TouchableOpacity onPress={() => removeItemFromCart(data.id)}>
<MaterialCommunityIcons
name="delete-outline"
style={{
fontSize: 16,
color: COLOURS.backgroundDark,
backgroundColor: COLOURS.backgroundLight,
padding: 8,
borderRadius: 100,
}}
/>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
);
};
return (
<View> {product ? product.map(renderProducts) : null} </View>
);
};
export default MyCart;
I would be grateful to help me
I have implemented tensor-flow camera functionalities for pose detection on a website and then hosted it on netlify. Link: https://uactivsite-mobile.netlify.app/.Also github link of the same: https://github.com/viveksgonal/uactivsite/blob/main/src/App.js
I am using this as webview on react-native app. The first time the app builds perfectly and the camera starts. But whenever I try to reload it or run npx react-native start the second time, the camera never opens.
If anyone knows where I'm going wrong, it would be pleasure if you provide the solution. Thank you.
Code is attached below for the react-native app part:
/* eslint-disable react-native/no-inline-styles */
import React, { useRef, useState } from 'react';
const exercises = [
{
name: 'High Knees',
total: 20,
index: 0
},
{
name: 'Jumping Jacks',
total: 25,
index: 1
},
{
name: 'Squats',
total: 20,
index: 2
},
]
import WebView from 'react-native-webview'
import {
View,
StyleSheet,
Text,
Image,
TouchableWithoutFeedback,
Modal
} from 'react-native';
import { useNavigation } from '#react-navigation/native';
const ExerciseCamera = () => {
const webviewRef = useRef(null)
const navigation = useNavigation();
const [speed, setSpeed] = useState(0)
const [reps, setReps] = useState(0)
const ex = 1
function getInjectableJSMessage(message) {
return `
(function() {
window.dispatchEvent(new MessageEvent('message', {
data: ${JSON.stringify(message)}
}));
})();
`;
}
function onMessage(data) {
let val = JSON.parse(data.nativeEvent.data)
if (val.type === 'reps') {
setReps(val.data.rep)
if (val.data.speed !== 0) {
setSpeed(val.data.speed)
}
}
else if (val.type === 'completed') {
navigation.navigate('dashboard', {
screen: 'completeddailyexercise',
});
}
else {
console.log(val.data.rep)
}
}
function sendDataToWebView(msg) {
webviewRef.current.injectJavaScript(
getInjectableJSMessage(msg)
);
}
return (
<View style={styles.container}>
<Modal
transparent={true}
visible={true}
>
<View style={styles.top_container}>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate('dashboard', {
screen: 'completeddailyexercise',
});
}}>
<Image
style={styles.icons_container}
source={require('../../Assets/play.png')}
/>
</TouchableWithoutFeedback>
<View style={styles.exercise_name_container}>
<Text style={styles.exercise_name}>Side lunges</Text>
</View>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate('dashboard', { screen: 'dailychallange' });
}}>
<View style={styles.icons_container}>
<Image
style={styles.icon}
source={require('../../Assets/close.png')}
/>
</View>
</TouchableWithoutFeedback>
</View>
<View style={styles.bottom_container}>
<View style={styles.timer_container}>
<Text style={styles.timer_text}>02:47</Text>
</View>
{reps > 0 ? (
<View
style={[
styles.number_container,
{ justifyContent: speed > 0 ? 'space-between' : 'center' },
]}>
{speed > 0 ? <Text style={styles.number}>{speed} RS</Text> : null}
<Text style={styles.number}>{reps}/{exercises[ex].total}</Text>
</View>
) : null}
</View>
</Modal>
<WebView
ref={webviewRef}
mediaPlaybackRequiresUserAction={false}
source={{ uri: 'https://uactivsite-mobile.netlify.app/' }}
scalesPageToFit={false}
mixedContentMode="compatibility"
onMessage={onMessage}
onLoad={event => {
sendDataToWebView({
data: exercises[ex],
type: 'exercise'
})
}}
/>
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1 },
preview: {
flex: 1,
},
top_container: {
zIndex: 1,
position: 'absolute',
top: 43,
paddingHorizontal: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
},
bottom_container: {
zIndex: 1,
position: 'absolute',
bottom: 0,
width: '100%',
},
number: { color: 'white', fontSize: 28 },
exercise_name_container: {
height: 40,
width: 155,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: 'rgba(255,255,255,0.2)',
},
number_container: {
height: 62,
backgroundColor: 'black',
width: '100%',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 19,
},
timer_container: {
width: '100%',
height: 78,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
backgroundColor: 'rgba(255,255,255,0.45)',
alignItems: 'center',
},
timer_text: { color: 'black', fontSize: 48, fontFamily: 'Poppins-Bold' },
icons_container: {
height: 40,
width: 40,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 50,
backgroundColor: 'rgba(255,255,255,0.8)',
},
icon: { width: 16, height: 16, resizeMode: 'contain' },
exercise_name: { color: 'black', fontFamily: 'Poppins-SemiBold', fontSize: 23 },
});
export default ExerciseCamera;
On my android phone, I can only select the first choice in the autocomplete list. It works as expected on my iPhone. The list filters as I type but no matter what the first option is after filtering, I can only select the first option in the list. I tried adding a "console.log" to the touchables in the list to see if the other options are registering the touch event and they aren't. Without giving away too much of my code it is as follows:
<ScrollView contentContainerStyle={[formStyles.container]} scrollEventThrottle={64} keyboardDismissMode="on-drag" onScroll={() => { if(!this.state.hideResults){this.setState({hideResults:true})}}}>
<KeyboardAvoidingView behavior={"padding"}>
<View style={AddViewInviteeStyles.inviteeInputMainView}>
<Text style={AddViewInviteeStyles.inviteeInputInstructionText}>{this.state.contactsRetrieved ? retrievedContactText : noRetrievedContactText}</Text>
<View style={[AddViewInviteeStyles.inviteeInputAutocompleteView]}>
<AutoComplete style={[AddViewInviteeStyles.inviteeInputAutocomplete, this.state.invalidContact ? {backgroundColor : '#dd4f42'} : {}]}
data={this.state.contacts}
value={typeof this.state.invitee === "string" ? this.state.invitee : this.state.invitee.name}
containerStyle={[textStyles.container, {width: textStyles.textboxes.width}]}
placeholder={"Invite someone"}
placeholderTextColor={textStyles.datePickerTextStyle.color}
ref={(ref) => this.inviteeControl = ref}
hideResults={this.state.hideResults}
inputContainerStyle={[textStyles.container, {width: '100%', borderWidth: 0}]}
onChangeText={(text) => {
this.setState({ invitee: text });
if(this.state.invalidContact){
this.validateContact();
}
this.filterContacts(text);
}}
renderItem={({ item, i }) => (
<TouchableOpacity onPress={() => {this.setState({ invitee: item, hideResults:true, invalidContact: false })}} style={[{width: "100%"}, i > 0 ? {marginTop: 10} : {}]}>
<Text numberOfLines={1} ellipsizeMode={"tail"} style={{fontSize: responsiveFontSize(2)}}>{item.name}</Text>
</TouchableOpacity>
)}
listStyle={[{width: '100%', position: 'relative'}]}
keyExtractor={(item, i) => {return i +""}}
listContainerStyle={[textStyles.container, {width: responsiveWidth(parseInt(textStyles.textboxes.width.replace('%', ''))), position:'absolute', left: 0, top: textStyles.textboxes.height, justifyContent: 'center', alignItems: 'center', zIndex:300}]}
autoFocus={true}
blurOnSubmit={false}
underlineColorAndroid='transparent'
/>
<TouchableOpacity activeOpacity={1} style={[{width: this.state.addNewInvitee ? '10%':'20%', ...Util.filterObject(textStyles.textboxes, ["width", "minWidth"])}, !this.state.addNewInvitee? textStyles.lastTextBoxInFirstRow : {}, !this.state.addNewInvitee? textStyles.lastTextBoxInLastRow : {}, this.state.invalidContact ? {backgroundColor : '#dd4f42'} : {}]} onPress={this.addInvitee.bind(this)}>
{!this.state.invalidContact ? <Text style={[{fontSize: this.state.addNewInvitee ? responsiveFontSize(3) : responsiveFontSize(4), alignContent: 'center', justifyContent: 'center', textAlign:'center', textAlignVertical: 'center', marginTop: this.state.addNewInvitee? 11: 5}, this.state.addNewInvitee ? {marginRight: 2} : {}]}><Emoji name={"heavy_plus_sign"} /></Text> : null}
</TouchableOpacity>
{this.state.addNewInvitee ? addNewInviteeCancelBtn : null}
</View>
{this.state.invalidContact ? invalidInviteeText : null}
</View>
</KeyboardAvoidingView>
</ScrollView>
const AddViewInviteeStyles = StyleSheet.create({
inviteeInputMainView: {
alignItems: 'center',
marginTop: 40,
marginBottom: 20
},
inviteeInputInstructionText: {
...textStyles.requiredNotice,
...textStyles.notifyTextStyle,
fontSize: responsiveFontSize(2),
...Platform.select({
android:{
width: responsiveWidth(90)
}
})
},
inviteeInputAutocompleteView:{
...textStyles.container,
flexDirection: 'row',
...Platform.select({
android: {
width: responsiveWidth(parseInt(textStyles.textboxes.width.replace('%' , ''))),
},
ios:{
width: textStyles.textboxes.width
}
})
},
inviteeInputAutocomplete: {
...textStyles.textboxes,
...textStyles.firstTextBoxInFirstRow,
...textStyles.firstTextBoxInLastRow,
width: '100%'
}
});
const formStyles = StyleSheet.create({
container: {
...appStyles.container,
flexGrow: 1,
width: '100%',
}
});
const appStyles = StyleSheet.create({
container: {
backgroundColor: '#e9dec2',
}
});
const textStyles = StyleSheet.create({
container: {
alignItems: 'center',
},
textboxes: {
color: '#3c3b5f',
backgroundColor: '#F0F8FF',
width: '80%',
paddingLeft: 5,
paddingRight: 2,
minHeight: 35,
height: 50,
borderBottomColor: '#fbdd07',
borderBottomWidth: 1,
},
requiredNotice: {
color: 'grey',
fontSize: 13,
marginTop: 70,
},
firstTextBox: {
marginTop: 70,
borderTopLeftRadius: 8,
borderTopRightRadius: 8
},
firstTextBoxInFirstRow: {
borderTopLeftRadius: 8,
},
lastTextBoxInFirstRow: {
borderTopRightRadius: 8,
},
firstTextBoxWithNotice: {
borderTopLeftRadius: 8,
borderTopRightRadius: 8
},
textBoxInRow: {
borderRightWidth: 1,
borderBottomColor: '#fbdd07',
//borderRightColor: '#fbdd07'
},
notifyTextStyle: {
marginTop: '7%',
fontSize: responsiveFontSize(4),
fontWeight: "300"
}
})
i need your helps.
I have a functional based component call WelcomeSlidePage. I want to pass a functional to the functional component. i try to console.log the function in functional component, in the first state, console.log is printing the function, but after the second state, it's becomes undefine.
this is my component that calling the functional component
WebViewPage.jsx
<Modal transparent={true} visible={this.state.WelcomeSlidePageModal} animationType="
<WelcomeSlidePage onDone={()=>{console.log('test bro');this.setState({WelcomeSlidePageModal:false})}}/>
</Modal>
and this is my functional component
WelcomeSlidePage.jsx
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
import string from '../string'
import { _storeData, _getData } from '../components/StoreAsync';
export default WelcomeSlide = (props) => {
const [language, setLanguage] = useState('english');
const [showRealApp, setShowRealApp] = useState(false);
const welcomeSlide = string.welcome_slide[language]
useEffect(() => {
console.log('testing bro',props.onDone)
// getData();
});
async function getData() {
setLanguage( await _getData("language"));
setShowRealApp( await _getData("showRealApp"));
}
_renderItem = ({ item }) => {
switch (item.key) {
case ('k4'):
return (
<View style={{backgroundColor : '#a0c83a', flex: 1}}>
<Text style={styles.title}>{item.title}</Text>
<View style={{justifyContent: 'center', paddingHorizontal: 20, flex: 1}}>
<Text style={styles.text}>{item.text_4_a}</Text>
<View style={{flexDirection: 'row'}}>
<Image style={styles.icon} source={item.icon} />
<Text style={{paddingStart: 5, paddingEnd: 20, ...styles.text}}>{item.text_4_b}</Text>
</View>
<Text style={styles.text}>{item.text_4_c}</Text>
<View style={{flexDirection: 'row'}}>
<Image style={styles.icon} source={item.icon} />
<Text style={{paddingStart: 5, paddingEnd: 20, ...styles.text}}>{item.text_4_d}</Text>
</View>
</View>
</View>
);
case ('k5'):
return (
<View style={styles.slide}>
<Text style={styles.title}>{item.text_5}</Text>
<TouchableOpacity style={{marginVertical: 24}} onPress={()=>{ props.navigation.navigate('WebView', { url: string.onboarding[language].login_url }); }}>
<Text style={styles.button}>{item.text_5_btn1}</Text>
</TouchableOpacity>
<TouchableOpacity style={{marginVertical: 24}} onPress={()=>{ props.navigation.navigate('WebView', { url: string.onboarding[language].register_url }); }}>
<Text style={styles.button}>{item.text_5_btn2}</Text>
</TouchableOpacity>
</View>
);
default:
return (
<View style={styles.slide}>
<Text style={styles.title}>{item.title}</Text>
<Image style={styles.image} source={item.image} />
<Text style={{paddingHorizontal: 20, ...styles.text}}>{item.text}</Text>
</View>
);
}
}
_onDone = () => {
setShowRealApp(true);
_storeData('isPassSlide',true);
props.navigation.navigate('WebView', { url: string.onboarding[language].login_url,splashScreen:false });
}
const slides = [
{
key: 'k1',
title: welcomeSlide.title,
text: welcomeSlide.a,
image: require('../images/my_library_card_white_notext_nopadding.png'),
backgroundColor: '#a0c83a',
},
{
key: 'k2',
title: welcomeSlide.title,
text: welcomeSlide.b,
image: require('../images/my_account_white_notext_nopadding.png'),
backgroundColor: '#a0c83a',
},
{
key: 'k3',
title: welcomeSlide.title,
text: welcomeSlide.c,
image: require('../images/library_catalog_white_notext_nopadding.png'),
backgroundColor:'#a0c83a',
},
{
key: 'k4',
title: welcomeSlide.title,
text_4_a: welcomeSlide.d_a,
text_4_b: welcomeSlide.d_b,
text_4_c: welcomeSlide.d_c,
text_4_d: welcomeSlide.d_d,
icon: require('../images/icon-hand-right.png'),
backgroundColor: '#a0c83a',
},
{
key: 'k5',
text_5: welcomeSlide.e,
text_5_btn1: welcomeSlide.e_btn1,
text_5_btn2: welcomeSlide.e_btn2,
backgroundColor:'#a0c83a',
},
];
return(
<AppIntroSlider
renderItem={_renderItem}
prevLabel={string.back[language]}
nextLabel={string.next[language]}
doneLabel={string.next[language]}
showPrevButton={true}
slides={slides}
onDone={()=>props.onDone()}/>
)
}
const styles = StyleSheet.create({
slide : {
flex: 1,
paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
paddingBottom: 80,
backgroundColor : '#a0c83a',
alignItems: 'center',
},
title: {
fontSize: 24,
color: '#fff',
fontWeight: 'bold',
textAlign: 'center',
marginTop : 30,
},
text: {
fontSize : 20,
color: '#fff',
textAlign: 'left',
},
image: {
width: 200,
height: 200,
resizeMode: 'contain',
flex:1,
},
icon: {
top: 10,
width: 25,
height: 15,
width: 25,
marginTop: -3,
},
content: {
paddingHorizontal: 20,
},
button: {
borderRadius: 8,
paddingVertical: 12,
paddingHorizontal: 12,
color: 'white',
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center',
marginHorizontal: 40,
backgroundColor: '#e46825',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
},
});
and then this is the console log
testing bro function onDone() {
console.log('test bro');
_this2.setState({
WelcomeSlidePageModal: false
});
} b11b05fa-4e76-41da-9d58-218edc178e45:157683:15
testing bro undefined
please help me guys, thanks
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.