Right now, I am using the CountdownCircleTimer as my "progress bar", but need one that counts up instead of down.
It looks like this, with a touchable image button in the middle that starts a recording.
<CountdownCircleTimer
isPlaying={progressCircle}
size={74}
strokeWidth={5}
duration={60}
colors={[["#000000", .001], [feedScreen ? "#F777B1" : "#64A6EC", .999]]}
trailColor={"transparent"}
>
<TouchableOpacity
style={tw.style(`rounded-full overflow-hidden justify-center items-center`, {
width: 62,
height: 62,
backgroundColor: "#000000",
})}
onPress={(e) => onPress(e)}
>
{children}
</TouchableOpacity>
</CountdownCircleTimer>
I'm trying to implement the CircularProgress component, but it hides the image/button. The top is the old countdown timer in the picture above, the bottom is the new circular progress bar, hiding the image/button.
<CircularProgress
value={duration}
delay={progressCircle}
radius={37}
activeStrokeWidth={5}
activeStrokeColor={feedScreen ? "#F777B1" : "#64A6EC"}
textColor={'transparent'}
>
<TouchableOpacity
style={tw.style(`rounded-full overflow-hidden justify-center items-center`, {
width: 62,
height: 62,
backgroundColor: "#000000",
})}
onPress={(e) => onPress(e)}
>
{children}
</TouchableOpacity>
</CircularProgress>
How can I put the image and button in the middle, like I did with the countdown circular?
You will have to use some form of absolute positioning.
Add something like this to your circular progress bar styling:
position: 'absolute',
alignSelf: 'center',
bottom: 0
You can adjust the absolute positioning via the top, left, and right proeprties as well.
Related
I want to be able to press on the searchbar icon of my search bar and have it acting the same way as if I had pressed on the placeholder of my search bar. So when I press the icon it must show my keyboard, etc... I tried to search on how to do it but I didn't get any result. Here is my current code:
<View style={{zIndex: 99}}>
<Searchbar
style={{borderRadius: 100, height: 35, backgroundColor: '#FAFAFA', elevation: 0, width: 0, top: 185, left: 180}}
placeholder='Search post '
placeholderTextColor='#E0E0E0'
iconColor="grey"
fontSize={5}
/>
</View>
You can use useRef to achieve this. doc
For Example:
const ref = React.useRef(null);
return (
<View style={{marginTop:100}}>
<Searchbar
placeholder="Search post"
placeholderTextColor='#E0E0E0'
onChangeText={onChangeSearch}
value={searchQuery}
iconColor="grey"
onIconPress={()=>ref.current.focus()}
ref={ref}
/>
Try it on expo
I have a button in my app that needs to be a perfect rectangle, but with no styling attached to it, there's a tiny default border-radius to it. How can I resolve this?
<Button
title="Next"
onPress={() => // Next stuff}
buttonStyle={{
backgroundColor: "#000000",
width: 'auto',
}}
/>
I have setup a custom header within react navigation. However it seems to flicker and glitch slightly when navigation between screens.
It's a bit intermittent but happens perhaps 70% of the time. This only happens when using the float headerMode however because my header title doesn't change the screen mode isnt really an option.
My header looking like this:
<Header style={style.header}>
<Left style={{ paddingLeft: 10 }}>
{props.previous ? BackButton(navigation) : null}
</Left>
<Body style={{ width: WIDTH - 75 }}>
<Text style={style.title} numberOfLines={1}>App Sample</Text>
</Body>
<Right style={{ paddingRight: 10 }}>
{showMenu(route) ? <TouchableOpacity hitSlop={{
top: 10,
bottom: 10,
left: 10,
right: 10
}} onPress={() => props.toggleMenu()}>
<Icon style={style.icon} name="md-menu" />
</TouchableOpacity> : null}
</Right>
</Header>
My screens themselves are simple and it doesn't seem to make a difference the type of screen i navigate to.
Any suggestions to try and really appreciated it, else I'm going to have to release our app with the screen headerMode which i really want to avoid.
Thanks!
I want to make a little game when some circles comes from the top of the screen. After they appear they will drag down until they go out of the screen.
To make that i have a flatlist which contains all of the circles
<FlatList scrollEnabled={false}renderItem={this.renderItem}data={this.state.elements} />
Then in the render item I insert the circle item view
renderItem = ({item}) => (
<Circle
apparitionTime={new Date().getTime() / 1000}
id={item.id}
removeCircle={this.removeCircle}
updateScore={this.updateScore}/>
);
A circle item looks like this :
<Animated.View style={[/*this.moveAnimation.getLayout(),*/ styles.animatedView]}>
<TouchableOpacity style={styles.circleStyle} onPress={() => this.prepareToSend()}>
<View style={styles.absoluteView}>
</View>
<Image style={styles.image} source={require('../assets/images/music.png')}/>
</TouchableOpacity>
</Animated.View>
I use the animated view to make them scrolling all over the view.
I want the animated view to be on position absolute,but no matter what i've tried after sending the animated view to position absolute, the element disappear
animatedView: {
top: 0,
zIndex: 100,
width: 75,
height: 75,
position: "absolute", // does not work
},
Any Ideas ? Thank you
Position absolute didn't work inside a flatlist.
Now how to render positional elements inside it !!!!!!!....
Alternatively, you can use alignSelf: 'flex-end' or alignSelf:
'flex-start' and further you can place it by using margin/padding
inside the view. More you can read here about absolute not working in
their official docs
I tried to create react native project and UI extends Component of #shoutem/ui,
But when i used NavigationBar of #shoutem/ui, i can't change color of content inside NavigationBar, like picture below here, News always got black color, how to change it to White color?
Here is my code:
<NavigationBar
style={{
container: {
position: 'relative',
width: Dimensions.get('window').width,
}
}}
leftComponent={(
<TouchableOpacity
style={{ paddingLeft: 10 }}
onPress={() => { this.props.navigation.navigate('DrawerOpen'); }}
>
<Image
styleName="small-avatar"
source={{ uri: 'https://scontent-hkg3-1.xx.fbcdn.net/v/t1.0-1/p160x160/17021999_1653807211588081_745686882439263143_n.jpg?oh=1dc68f938a820a9ccfea09033c0f4e34&oe=5987630B' }}
/>
</TouchableOpacity>
)}
centerComponent={
<DropDownMenu
selectedOption={this.state.selectedChannel ?
this.state.selectedChannel : this.state.channel[0]}
options={this.state.channel}
onOptionSelected={(channel) => this.onChoiceChannel(channel)}
titleProperty="name"
valueProperty="id"
/>}
/>
And here is my result:
Please help me fix this! Or suggest me someway can resolve it!
Thanks you guys so much!
The text color in NavigationBar is determined by the background color. If the background color is dark enough, NavigationBar will switch it's components to the "light-content", as seen in:
AppName/node_modules/#shoutem/ui/components/NavigationBar.js
function chooseBarStyle(bgColor) {
return color(bgColor).isDark() ? 'light-content' : 'default';
}
If you want to edit the color manually, you'll have to edit:
AppName/node_modules/#shoutem/ui/theme.js
title: {
fontFamily: 'Rubik-Regular',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: 20,
color: '#222222', //edit color here for your Title
}
Edit in response to comment:
The icon color is also edited in:
AppName/node_modules/#shoutem/ui/theme.js
navBarIconsColor: '#222222' //edit this line for your Icon