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.
Related
When i use map the images render slow on localhost. However, when I dont use map it loads quickly.
I used a variety of props from Image component but none seem to fix this issue.
However, after all images rendered and I hit the refresh button they load fast.
This is quite confusing. Is there any way to load images quickly upon first page visit?
import React from 'react';
import Image from 'next/image';
import styles from './Peoples.module.scss';
export const Peoples = () => (
<>
{[...Array(10)].map((x, i) => (
<div className={styles.team_img_container} key={i}>
<Image
style={{ height: 100, width: 100 }}
src={`/people/${i + 1}.webp`}
alt="Picture of the author"
width={100}
height={100}
// unoptimized={true}
// loading="eager"
priority={true}
// quality={70}
/>
</div>
))}
</>
);
export default Peoples;
So I deployed this and left it as is It seems like during development mode all png or jpg will be converted to webp hence the slow reload. So deploy it and check out its performance on Vercel just dont use webp cause next will convert that 2 .
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
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
I'm struggling with react-spring to fade out a loading screen and then unmount it.
The component unmounts but without animation and I can't figure why. I created a sandbox to illustrate:
https://codesandbox.io/s/nkxjxwo2xl
import React from 'react'
import ReactDOM from 'react-dom'
import { Transition } from 'react-spring'
class Loader extends React.PureComponent {
state = { loaded: false }
componentDidMount() {
setTimeout(() => {
this.setState({ loaded: true })
}, 1000)
}
render() {
const { percentage } = this.props
const styles = {
height: '100vh',
width: '100vw',
background: 'tomato'
}
return (
<Transition native from={{ opacity: 1 }} leave={{ opacity: 0 }}>
{!this.state.loaded &&
(style => (
<div style={Object.assign({}, styles, style)}>
<div>{Math.round(percentage)} %</div>
</div>
))}
</Transition>
)
}
}
ReactDOM.render(<Loader percentage={0} />, document.getElementById('root'))
There are no react-spring tags yet if anyone could create one, I think it would be helpful.
Yep, you fixed it yourself, the animated.div component was missing. I would recommend the use of it, though. Even if your view is small, it will still be rendered out 60 times per second by React otherwise (meaning it will go through all component phases 60 times + render). With native set it renders once and the animation will be applied in a requestAnimationFrame-loop directly in the dom (via instance.style.setProperty, it completely skips React - which makes a difference once your app gets bigger.
I found the solution if anyone finds this question.
Using the native attribute, you'll need to use animated.div (or any animated component) in order to have it animated. Or simply remove the native attribute. In my case, it is a loader which is not often displayed so I went for the easier way by simply removing the native attribute.
More info on the Spectrum react-spring community
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