I am looking for a simple button with clear color and black text, but the default button has white text. I need a way to change the text color. Check out my current app
<View style={styles.fastlog}>
<Button style={styles.bouton}
title= "Connect with Facebook"
color= "#A2FFA1"/>
<Button style={styles.bouton}
title= "Connect with Google"
color= "#A2FFA1"/>
</View>
This code works to create green buttons, but I am struggling to find a solution for changing the text color.
Include Text in Button with custom text color.
<Button
style={styles.bouton}
color= "#A2FFA1"
>
<Text style={{color: '#fff'}}>Sign in with Facebook</Text>
</Button
For more information, check out: https://github.com/GeekyAnts/NativeBase/issues/477
When faced with a situation like this, my recommendation would be to either utilize a third-party library or develop a customButtonComponent. The Button component provided by react-native may not offer extensive styling options.
It is important to note that the color prop you are using will only change the background color of the button on Android, while it will affect the text color on iOS.
By combining TouchableOpacity and Text, you can create a custom Button component that can be styled using your own props and styles.
In React Native, styling options for buttons are limited. One workaround is to use TouchableOpacity or TouchableHighlight components with a Text property inside. This way, you can apply styling properties to both the View as a touchable component and the Text property.
<TouchableOpacity style={{...yourStyles}} >
<Text style={{...yourTextStyles}}></Text>
</TouchableOpacity>
Using an Android Device
const customStyles = StyleSheet.create({
btnSearch: {
backgroundColor: "#F1F1F1",
borderColor: "#D5D5D5",
borderWidth: 1,
borderLeftWidth: 0,
borderRightWidth: 0,
borderTopWidth: 0,
borderRadius: 0,
},
btnTitleSearch: {
color: "#33353D",
},
});
<CustomButton
navigation={this.props.navigation}
title={
this.state.searchPackageId
? "Selected Package Id: " + this.state.searchPackageId
: "No Package Id Selected"
}
buttonStyle={customStyles.btnSearch}
titleStyle={customStyles.btnTitleSearch}
onPress={() => {
var nav = this.props.navigation;
console.log(this.state);
nav.navigate("PackageIdInput", {
packageId: this.state.searchPackageId,
updatePackageId: updatePackageId,
});
}}
/>
To understand the component's structure, refer to the index.d.ts file.
<TouchableOpacity
style={styles.customButton}
color= "#FFA1A2"
title="Click me!"
>
<Text style={{color: '#fff'}}>Press this button</Text>
</TouchableOpacity>
Remember to always include title attribute for better accessibility!
There are 3 identical <div>s available: <div class="box">Hello World!</div> <div class="box">Hello World!</div> <div class="box">Hello World!</div> I need these <div>s to ...
My goal is to make the .panel-text element visible only when a user hovers over the panel. I attempted to use the overlay CSS class, but I encountered issues where the text either wouldn't show at all or would always be displayed. Here is what I have ...
After discovering that custom components can be created like this: const CustomComp=()=>{ console.log('Created custom comp'); return(<View></View>); } export default function App(){ return(<View style={{flex:1}}> &l ...
Whenever I submit a post request without including an image, everything goes smoothly. However, when I try to add an image, the process fails with an Error: Request failed with status code 409. Below is the code snippet for my react form page. const Entry ...
My array, named tableFilterFields, looks something like this: const tableFilterFields = [ { label: "Start Date", name: "StartDate", type: FilterControls.DatePicker, defaultValue: new Date(new Date().setDate( ...
It's quite a challenge I'm facing!!! Although there have been similar questions asked before, they were all for specific scenarios. I am currently developing a tictactoe game using the module design pattern. The function below helps me create tw ...
I am facing a problem where 2 elements are not responding to the specified margins of margin: 260px 0 0 0; or margin-top: 260px;. Despite inspecting the elements in IE's dev tools and confirming that the margin is set, the elements appear at the top o ...
The issue encountered: Objects are not valid as a React child. If you intended to render a collection of children, consider using an array instead. Here 'res' contains nested arrays in JSON format, so I utilized _.forEach to extract it. The st ...
Hey there, I've been working on creating a dropdown menu that can be activated by clicking for better usability on touch screens. $('a.dropsmall2').click(function() { $(this).next('ul').slideToggle(500,'easeInOutQuad'); ...
I have encountered a situation where I am using two different class components and need to invoke a method from the parent component. To do this, I have created two references using React.createRef(). The issue I am facing is that one component accepts t ...
I'm struggling to adjust the position of the icon in an Ionic radio button so that it sits a bit higher, but I can't seem to figure out how to do it. Below is the code snippet for reference: // HTML <ion-radio class="radio-input" mo ...
I am facing an issue with an asp menu I am using. It is automatically inserting style="width:3px;" into my menu table tds, creating an unsightly gap between my tabs. Instead of asking our developer to customize the menu just to fix this cosmetic flaw, I am ...
Hey there! I am new to CSS animation and currently working on a project where I need to slide in a div element and then slide it out of the screen using keyframes in Next.js. The sliding in part is working perfectly fine, but I'm facing some issues wi ...
As a newcomer to React.js, I have been exploring various tutorials to successfully set up the environment for React.js! Initially, this was the issue encountered: The CLI has moved into a separate package: webpack-cli. To utilize the CLI, it is necessary ...
Struggling with a select issue involving the displayEmpty prop. I've experimented with different approaches, but when value === "", the label ends up covering the input. <FormControl> <InputLabel htmlFor="profile-select"> ...
To create a design using html and css to display numbers in an image counter related to a carousel, follow these steps: https://i.stack.imgur.com/OBAHd.png I'm encountering an issue where I need to add a line break in the "content" so that the .down ...
I'm exploring the possibility of implementing a JavaScript screen recorder that captures a video feed rather than the entire screen. I'm wondering if it's achievable using getDisplayMedia or if there's a specific library for this purpos ...
After extensively searching for a solution to the issue plaguing my website, I found that there was always an annoying gap at the top of the page. Despite trying various solutions, none seemed to work. Upon inspecting the website in Firefox, I discovered t ...
With the removal of the children prop from React.FC type, what is the new approach for typing components? ...
Let's consider a scenario where there is a web page containing a form: <form> <label for="FirstName">First:</label> <input name="FirstName" type="text"> <label for="MiddleName">Middle:</label> <input n ...