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!
Currently, I am struggling with how to efficiently utilize a single variable array for storing image URLs in local storage based on the user's current page. For example, if a user is on page 1 and adds images to that page, I need to save both the page ...
I am facing an issue on my ReactJS page where two dropdown lists are showing duplicate values. These values are retrieved from a json file. I have tried using the filter method to eliminate duplicates, but I am unsure about how to apply it in my array whil ...
I am new to React JS and I have a question regarding sending files as a react object array to php $_FILES using axios. Any help is appreciated, thank you in advance. Here is my react code: This is the code snippet: <Row> <Col lg={4}> ...
My goal is to assign the class no-color to a specific tag. When JavaScript is enabled, I want this class to be removed and the text to be colorized. However, my current CSS solution is not working as expected. Below is a sample code snippet demonstrating t ...
In all my years, I've been told that React components should follow a tree hierarchy so that parent components can manage state and pass it down to their children. But is this truly necessary? The guiding principle of React states that "React has bee ...
Can anyone help me figure out how to make this script function on image load instead of onclick? I came across the script on stackoverflow, but it was originally set up for onclick. I want it to work for onload or .load HTML====== <div id="contai ...
I am struggling with a web socket that sends an object named PushMessage to a React page for real-time updates. Currently, when a user searches for and displays one PushMessage, then searches for another, both are displayed simultaneously. I want only the ...
Is there a way to incorporate the context API within getInitialProps in order to manage the loading spinner while making requests? What is the best approach to invoke my context methods within getInitialProps function? ...
I am working on a layout where I need three flex items (rows) in a flex container, and my requirement is to justify them as space-between... The first row will consist of cloud tags, the second will have a price, and the third will contain a Read more link ...
My webpage has a very long layout with text in one column and a floating element in another. I want the floating element to follow the scroll of the window and return to its original offset once scrolling stops. The current code I have is: var ticking = ...
I encountered an issue when running npm run build, and despite my efforts to resolve it by researching various articles on GitHub and Stack Overflow, I couldn't find a solution: npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users&bs ...
In my project, I am using materialUI to showcase an Expansion Panel. Here is the code snippet: import React from 'react' import ExpansionPanel from '@material-ui/core/ExpansionPanel'; import ExpansionPanelSummary from '@material-u ...
I've been struggling to retrieve the form data sent to my Node.js server using Axios. Surprisingly, I can view the data if I send the same request back as a response, but not on the server itself. I'm puzzled as to why this is happening. Take a l ...
I have been attempting to export a react component as a PDF file. Here are the steps I have followed: Converting the component into an image using html2canvas Creating a PDF document Attaching the image to the PDF The component contains images with URLs ...
I have encountered some outdated legacy blog code and am currently attempting to isolate the first div element with the attribute of "text-align: left". Below is a simplified example of the code snippet I am dealing with: <div class="et_pb_module e ...
While attempting to load data into an MUI Autocomplete, I encountered this message in the console. React-hook-form and yup are being used for form validation. Image displaying the warning To showcase my issue, I have set up a CodeSandbox. In this example, ...
Can anyone assist me with this problem? I am looking to create a "looping" effect similar to the image provided. What is the logic behind this repetition? Thank you in advance for your help! Here is an example output: ...
What should I do if my project is not found on Node.js and npm install is unable to detect my project, resulting in the following error message: Error: npm ERR! code ENOENT npm ERR! syscall open npm ERR! path D:\BLOCKCHAIN EXPERIMENTAL LAB\newflo ...
I am facing an issue with two divs, left and right, on my webpage. When the screen size is less than 500px, I want the left div to move to the bottom and the right div to move to the top. Essentially, I need to swap the positions of these divs in the DOM. ...
After expanding FlatList in console.log and verifying the JSON value, I am facing an issue where the values are not displaying on the list. The data is being passed to the second screen and displayed there, but the first screen remains blank. Any assistanc ...