React native TextInput - javascript

I'm starting to learn react native, therefore I'm following the documentation, however, I can not test the TextInput, I copy past the example from the official documentation but nothing appears in my app.
I also remarked that when I add other components they doesn't appears also, however, when I remove the TextInput they appears as expected.
I searched online for some solution, I find a lot, but non works for me ( mostly the talked about the height of the component...).
also there is no error neither in the app nor in the debugger-gui
does anybody have a solution?
Edit1
to get started with react I followed the instructions and create AwsomeProject,
then in the app.js (I also tried to create a separte component and call it in app.js) I added this code :
<View style={{ backgroundColor: 'red' }}>
<TextInput style={{ backgroundColor: '#ededed', height: 60 }} value={'Hello'} />
</View>

It's hard to know without a code example but are you importing TextInput at the top of the file?
import { TextInput } from 'react-native';

I think by adding flex:1 and onChangeText in the textInput will solve the issue
import * as React from 'react';
import {View, TextInput,Button} from 'react-native';
export default class App extends React.Component {
state={
text:"Hello"
}
render() {
return (
<View style={{ backgroundColor: 'red',flex:1,justifyContent:'center'}}>
<TextInput style={{ backgroundColor: 'red', height: 60,width:300 ,borderWidth:1,borderColor:"white"}} value={this.state.text} onChangeText={(text) => this.setState({text})}/>
<Button
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
);
}
}

Here is the full code of the simplest use of a TextInput.
import * as React from 'react';
// We have to import the components that we are going to use in our app.
// TextInput is a part of the 'react-native', which should be already installed if you have followed the official documentation correctly.
import {View, TextInput} from 'react-native';
export default class App extends React.Component { // Our main App component
render() {
return (
<View style={{ backgroundColor: 'red' }}> // The TextInput is in a view. This view has a red background. When you use the link below, you will see a red section at the top of the screen. That is our view.
<TextInput style={{ backgroundColor: 'red', height: 60 }} value={'Hello'} /> // This is the TextInput component, which has the text "Hello" in it. As you can see, it will be rendered in the parent red view.
</View>
);
}
}
Check out the live example in this link.
More:
React Native Getting Started on TextInput
Let me know if it doesn't clarify what you're trying to do!

To show text input on UI, You need to use flex concept or need to define width of text input.
or

Related

How to create a one side skewed custom button component in react native [duplicate]

This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 3 months ago.
I want to create a custom react native button which is skewed one side. I have referred so many articles but neither of then doesn't solved my requirements.
Here is the sample of the button looks like. One button skewed left and other button skewed right.
Here is the buttons looks like.
One side skewed button example 1
One side skewed button example 2
Anybody please help me to create this button.
It is possible to create a skewed button by adding some style. Try this style.
import React from "react";
import { View, Text, StyleSheet } from "react-native";
const App = () => {
return <View style={styles.button} />;
};
const styles = StyleSheet.create({
button: {
width: 250,
height: 0,
borderTopWidth: 100,
borderBottomColor: "red",
borderLeftWidth: 0,
borderLeftColor: "transparent",
borderRightWidth: 50,
borderRightColor: "transparent",
borderStyle: "solid",
},
});
export default App;

React MUI timeline dot color change

Hi I want to override the default color of MUI TimelineDot component. I simply did this
<TimelineDot
sx={{
'& .MuiTimelineDot-root': { backgroundColor: '#00FF00' },
}}
/>
But this seems not working. What went wrong in my code?
This is my Codesandbox link
No need to specify a class name or anything like that. Simply just change the color. Per the API docs
<TimelineDot
sx={{
backgroundColor: '#00FF00'
}}
/>

How to add createStackNavigator inside ImageBackround of view to have common background image?

I am trying to import createStackNavigator from an external file and add it inside ImageBackground of View so that I can have common flow of backround image from top to bottom but I am getting errors like
TypeError: No "routes" found in navigation state
Code:
<View style={styles1}>
<ImageBackground source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }} style={{width: '100%', height: '100%'}}>
<componentNavigator style={{ backgroundColor: 'transparent' }} navigation={navigation} />
<View></View>
</ImageBackground>
{/*</ImageBackground>*/}
</View >
To fix the above issue I added
static router = AccountsNavigator.router; // added it below constructor
Then I am getting Connot readt propery 'router' of undefined
I am not sure how to fix it, even if it fixed will it take the flow og background image?
I have found the solution, by adding headerTransparent: true inside navigationOptions, I can able to achieve transparent background though I had to position the below container with position: absolute

React-Stripe-Elements element not rendering style as expected

I'm trying to setup React-Stripe-Elements and while I was able to get the basic form to render, it does so in a really funky looking way. I even tried to add CSS from a form I found online and it won't render in the CardElement properly. How can I get React-Stripe-Elements to render with the proper UI or UI that even remotely resembles the UI on the docs?
The CardElement is currently rendering like:
And my card element file looks like:
import React from 'react';
import {CardElement} from 'react-stripe-elements';
class CardSection extends React.Component {
render() {
return (
<label>
Card details
<CardElement style= {{ base: { color: '#fff',
fontWeight: 500,
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '15px',
fontSmoothing: 'antialiased' }}} />
</label>
);
}
};
export default CardSection;
I'm not sure what your definition of "funky" is - it might be better to add a link to a specific element and state what is different than you expect.
If I were to guess, I would say a few things are probably not as you like:
100% width - I think the package assumes you want a 100% width input. For example, I have all my inputs 100% but they are in containers of the smaller width that I want on the screen.
No border - you can add a border if you like. The input is usually more visible when the page has a background color other than white.
Height or padding - this could be a function of not seeing the true borders.
You can check out some more styling options that they use in their demo here: https://github.com/stripe/react-stripe-elements/blob/master/demo/demo/index.js
This answer might also be helpful https://stackoverflow.com/a/43986418/5049215

react-google-maps does not work

I am building this weather application. Everything seems to work, but I cannot make google maps to work. I saw that API key is needed, I imported it. Then followed the documentation of react-google-maps while installing it in my project, but it still does not work, however, I have no errors in my console anymore.
Can you please look at it, what is wrong here? Feel free to clone it.
https://github.com/garstikaitis/weather-app/blob/master/src/components/google_map.js
http://arsti.net/weather-app/
For the specific app referenced in the question, I am able to see the map when I run the app locally. However, it is very, very narrow. This does not seem to be a react-google-maps issue but rather an HTML table layout issue in which the width of the map needs to be adjusted.
On another note, a common issue, if you don't see any map at all, could be due to setting the height of the map to "100%". You'd be asking for 100% of the height of the parent container, which could easily be a collapsed div of zero height, so you'd be essentially asking for 100% of nothing.
Here's an example using the #next version of react-google-maps (currently 7.0.0 as I write this) and React 15.6.1:
import React from 'react';
import ReactDOM from 'react-dom';
import { withGoogleMap, GoogleMap } from "react-google-maps";
import withScriptjs from "react-google-maps/lib/async/withScriptjs";
const GettingStartedGoogleMap = withScriptjs(withGoogleMap(props => (
<GoogleMap
defaultZoom={3}
defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
/>
)));
ReactDOM.render(
<div style={{ height: '600px' }}>
<GettingStartedGoogleMap
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.28"
loadingElement={<div></div>}
containerElement={ <div style={{ height: `100%` }} /> }
mapElement={<div style={{ height: `100%` }} />}
/>
</div>,
document.getElementById('root')
);
If you removed the outer div's fixed height of 600px or replaced it with 100% the div would collapse and you wouldn't see the map at all. Hope this helps.

Categories