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',
}}
/>
Related
I have a react native screen. Where I want the collapsible header to expand and collapse based on the scrolling of the scrollview but I also want a fixed button at the ned of the screen. Now I tried giving my scrollview a flex:1 but it seems to make the scrollview stop scrolling. and the scrollview takes up all the available space of the parent so even if I give flex 1 to a view wrapping the scrollview it does not scroll.
I have tried a solution by giving the parent height of 70% but I want the button to be fixed on the bottom. How do I achieve this.
I currently have this code
<SafeAreaView edges={["bottom"]}>
<Animated.View
style={{
height: interpolatedHeight,
}}
>
<HeaderComponent />
</Animated.View>
<Animated.ScrollView
style={[
CourseDetailStylesheet.scrollingContainer,
{
borderTopLeftRadius: borderRadius,
borderTopRightRadius: borderRadius,
flex: 1,
},
]}
scrollEventThrottle={16}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
{ useNativeDriver: false }
)}
>
{/** Rest of the content */}
</Animated.ScrollView>
<Button style={CourseDetailStylesheet.ctaButton} title={"Fixed Button"} />
</SafeAreaView>;
I am trying to achieve this
I have read the docs but still don't understand how to make the text input scroll to an exact position. I want the text input to automatically scroll to the very top of the screen just below my Header component. Using the following code below, could anyone provide an example of how this is done? Thanks.
<KeyboardAwareScrollView>
<TextInput
style={{
fontSize: 18,
width: "100%",
textAlignVertical: "center",
}}
autoFocus={true}
blurOnSubmit={false}
value={name}
onChangeText={(text: string) => {
setName(text);
}}
/>
</KeyboardAwareScrollView>
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.
I need the border lines to be displayed but here only the sides can be seen it is blank in the top and bottom
I have tried this using react native elements
Here is what I wanted to acheive
Here is what I got with this code
<SearchBar
round
lightTheme
icon={{ type: 'font-awesome', name: 'search' }}
placeholder="Buscar producto..."
platform="ios"
containerStyle={{
backgroundColor: 'transparent',
}}
inputStyle={{ backgroundColor: 'white' }}
/>
First you have to find which prop that SearchBar gives you access to is the one you want. inputStyle only styles the TextInput component, while containerStyle styles the whole big SearchBar (which has some extra padding and stuff that we don't want).
The prop you want is inputContainerStyle which will style the container around TextInput and the bits on the left and right. So to give a border you could simply do:
<SearchBar
round
lightTheme
icon={{ type: 'font-awesome', name: 'search' }}
placeholder="Buscar producto..."
platform="ios"
inputContainerStyle={{
backgroundColor: 'white',
borderColor: 'grey',
borderWidth: 1
}}
/>
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