I made a Fab component of native-base Fab. I would like to show badges for collapsible buttons. My solution works fine on iOS, but not on Android where the badge is not overflowing the button and thus is only partly shown.
<Fab
active={isFabActive}
direction="up"
containerStyle={{}}
style={styles.fab}
position="bottomRight"
onPress={() => onPressFn || this.setState( { isFabActive: !isFabActive } )}>
<Icon type={iconFont} name={iconName}/>
{
!onPressFn && buttons && buttons.map( ( i, index ) => (
<Button iconCenter
style={{ backgroundColor: "#3B5998" }}
onPress={ i.onPressFn }
key={index}>
<Icon type={ i.iconFont || 'FontAwesome' } name={i.iconName}/>
{
i.badgeText !== undefined && <Badge style={styles.fabBadge}><Text>{i.badgeText}</Text></Badge>
}
</Button>
))
}
</Fab>
const styles = StyleSheet.create( {
fab: {
backgroundColor: COLOR_PRIMARY
},
fabBadge: {
position: 'absolute',
right: -10,
top: -10,
}
} )
On android overflow: visible is not supported yet, if you want to make it visible add padding to parent view(<Fab />) to make it bigger so badge won't be cut.
Related
I have a component wrapped with react-native-swipe-gestures
import React from 'react'
import GestureRecognizer from 'react-native-swipe-gestures';
import Carousel from 'react-native-reanimated-carousel'
const MyComponent = () => {
return (
<GestureRecognizer
onSwipeLeft={() => { handleSwipeTask('left') }}
onSwipeRight={() => { handleSwipeTask('right') }}
>
{/*
some view children
*/}
<Carousel
loop
width={size.width}
height={size.height}
autoPlay={false}
data={lists}
scrollAnimationDuration={2000}
onSnapToItem={e => console.log(e)}
renderItem={({ item, index }) => {
return (
<View
style={{
width: '100%',
borderWidth: 1,
justifyContent: 'center',
}}
>
<FastImage
key={`attachment-${index}`}
style={{
width: '100%',
height: '100%',
}}
source={
local ? item.file_path
: {
uri: item.file_path,
priority: FastImage.priority.normal,
// cache: FastImage.cacheControl.cacheOnly
}
}
resizeMode={FastImage.resizeMode.contain}
/>
</View>
)
}}
autoPlayInterval={4000}
pagingEnabled={true}
/>
{/*
some view children
*/}
</GestureRecognizer>
)
}
with the gesture reconigzer when i swipe left or right i have to change the data of the view with handleSwipeTask method; it work well and in the data i have an array of images to show as carousel; so using react-native-reanimated-carousel i made my carousel working; but my issue when i swipe manually the caroussel my gesture recognizer detect the swipe and with the caroussel sliding my handleSwipeTask is triggered too; so what i want is to disable that recognition only for my caroussel component; i don't want to wrap every view exluding the caroussel on the gesture recognizer (it's my last option if there is no solution)
What I'm trying to do is the user to have the possibility to choose his contact(his contact list) and to save them.
The problem is when the user clicks the checkbox to chose the phone number, it delays 2-3 seconds.
After 2-3 seconds the checkbox is completed.
const onChangeValue = (item) => {
if (itemChecked.includes(item.phoneNumbers[0].digits)) {
itemChecked.splice(itemChecked.indexOf(item.phoneNumbers[0].digits), 1);
} else {
itemChecked.push(item.phoneNumbers[0].digits);
setCheckedBox(true);
}
setItemChecked(itemChecked);
console.log(itemChecked);
// console.log(item);
};
return(
<View>
{itemChecked.includes(item.phoneNumbers[0].digits) === false ? (
<CheckBox
style={{ width: 15, height: 15 }}
right={true}
checked={false}
onPress={() => {
onChangeValue(item, index);
}}
/>
) : (
<CheckBox
style={{ width: 15, height: 15, paddingTop: 8 }}
right={true}
checked={true}
onPress={() => {
onChangeValue(item, index);
}}
/>
)}
</View>
);
How can I solve the delay?
Did you try another ui library for checkbox?
If not, u can check React-Native-Elements and Native-Base
Background:
I've designed a custom footer for my app in React Native, I've set some images to act as icons. I'm trying to have them redirect to other pages of the app upon touch.
What I have tried
I've been trying to use the same images nested within TouchableOpacity components to have them redirect to other pages using react navigation.
This is my code:
export class Footer extends React.Component {
render (){
return (
<View style = { styles.footStyle } >
<TouchableOpacity onPress={ () => navigation.push('Home')} >
<Image
style = { styles.iconStyle }
source = {require('./img/home.png')}/>
</TouchableOpacity>
<TouchableOpacity onPress={ () => navigation.push('Favoritos')} >
<Image
style = { styles.iconStyle }
source = {require('./img/heart.png')}/>
</TouchableOpacity>
<TouchableOpacity onPress={ () => navigation.push('Search')} >
<Image
style = { styles.iconStyle }
source = {require('./img/search.png')}/>
</TouchableOpacity>
<TouchableOpacity onPress={ () => navigation.push('Notifications')} >
<Image
style = { styles.iconStyle }
source = {require('./img/bell.png')}/>
</TouchableOpacity>
<TouchableOpacity onPress={ () => navigation.push('Help')} >
<Image
style = { styles.iconStyle }
source = {require('./img/circle.png')}/>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
footStyle: {
paddingBottom: 0,
paddingRight: 10,
backgroundColor: '#ffffff',
flex: 0.4,
flexDirection: 'row',
borderTopWidth: 1,
borderTopColor: '#000000'
},
iconStyle: {
flex: 0.2,
height: undefined,
width: undefined
}
})
Problem
When I try and run the app in expo, the images are not rendering at all. I get my blank footer without any content. I've tried touching the footer to see if the images weren't rendering but the "button" actually worked, that didn't work.
Question
How exactly can I nest an image within a TouchableOpacity component? Is it even possible to use this method with React Navigation?
Thanks a lot!
For an Image component to work you should provide a height and width in style.
Here you are setting it as undefined
Try something like
iconStyle: {
flex: 0.2,
height: 100,
width: 100
}
Also on the navigation, you will have to pass the navigation prop to the Footer. As its a class you should access it as this.props.navigation.navigate()
As your code for integrating the Footer is not here, its hard to comment on how to pass the prop to the footer.
I created 2 Views that display overlaps to each others. The top and the bottom
When the bottom view background wasn't configured. It responded to the press event correctly. Let's say when I press on the overlap zone, it showed that the bottom one had been pressed
However, when I configured the bottom view backgroundColor. When I pressed on the overlap zone, on Android, it responded as I pressed on the top view which I think it's incorrect. (iOS it responded correctly that the bottom was pressed)
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
Here is an example component
const OverlapseTouchExample = ({backgroundColor}) => {
const [pressedBox, setPressefBox] = React.useState('')
return (
<View>
<Text>{pressedBox} pressed</Text>
<TouchableOpacity style={[styles.box, {backgroundColor: 'blue'}]} onPress={() => setPressefBox('top')} />
<View style={backgroundColor ? { backgroundColor: 'orange' } : null}>
<View style={{marginTop: -75}}>
<TouchableOpacity style={[styles.boxBottom, backgroundColor ? { backgroundColor: 'green '} : null]} onPress={() => setPressefBox('bottom')} />
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
box: {
width: 150,
height: 150,
borderWidth: 1,
},
boxBottom: {
width: 120,
height: 200,
borderWidth: 1,
}
})
The problem found when set the backgroundColor to true
<OverlapseTouchExample backgroundColor={true} />
You could see it in Snack https://snack.expo.io/#gie3d/9b6c32 (Android)
the problem is quite simple I think, but I can't seem to figure it out. I am using the react-native-router-flux library and the NativeBase library for the buttons.
This is my code:
<Button transparent onPress={Actions.MainOne } style={{ width: 50, height: 50 }} >
<Text>Option1</Text>
</Button>
<Button transparent onPress={Actions.MainTwo} style={{ width: 50, height: 50 }} >
<Text>Option2</Text>
</Button>
I want to change the background color of the button whenever i press it and it's active. And if I click another button, then the button I just pressed gets the background and the first button goes back to normal transparent background. I am not really sure how i can add two actions to the button. If anyone can assist I would appreciate it. I don't need to necessarily use the button library, so any ideas about this are welcome !
Thank you !
I use the flux-router to navigate through scenes. This is how I would change the background color of a button when pressed:
constructor() {
super();
state = {
color1: 'transparent',
color2: 'transparent',
}
}
setActive(button) {
if (button === 1) {
if (this.state.color1 === 'transparent') {
this.setState({
color1: 'red',
color2: 'transparent'
})
}
} else {
if (this.state.color2 === 'transparent') {
this.setState({
color2: 'red',
color1: 'transparent'
})
}
}
}
{ . . . }
<Button
onPress={this.setActive.bind(this, 1)}
style={{ width: 50, height: 50, backgroundColor: this.state.color1 }}
>
<Text>Option1</Text>
</Button>
<Button
this.setActive.bind(this, 2)
style={{ width: 50, height: 50, backgroundColor: this.state.color2 }}
>
<Text>Option2</Text>
</Button>