I am trying to make a react full page scroller into my next js app from this link
https://github.com/ibrahim-ih/react-full-page-scroller
I have created an app using npx next-create-app and installed the module using
npm install --save react-full-page-scroller
and added the following code in the index.js page
import React from 'react'
import MyComponent from 'react-full-page-scroller'
import 'react-full-page-scroller/dist/index.css'
const App = () => {
const nav = [
{
id: 1,
title: 'title 1',
className: 'page-nav-button',
style: { width: '100%' }
},
{
id: 2,
title: 'title 2',
className: 'page-nav-button',
style: { width: '100%' }
},
{
id: 3,
title: 'title 3',
className: 'page-nav-button',
style: { width: '100%' }
}
]
const indicatorStyle = {
height: '8px',
width: '8px',
margin: '10px',
borderRadius: '4px',
backgroundColor: 'white',
transition: 'width 500ms ease'
}
const indicatorStyleActive = { width: '20px' }
return (
<MyComponent
pageNav={nav}
indicatorStyle={indicatorStyle}
indicatorStyleActive={indicatorStyleActive}
>
<div
className='bg-blue'
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<h1 className='page-number'>1</h1>
</div>
<div
className='bg-green'
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<h1 className='page-number'>2</h1>
</div>
<div
className='bg-red'
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<h1 className='page-number'>3</h1>
</div>
</MyComponent>
)
}
export default App
This shows the following error
Note I tried the simplest form, which is
wrapping 3 divs in between
It works for the first time as I save it, but as I reload the page the mentioned error shows again.
It looks like react-full-page-scroller is not compatible with SSR, so you'll have to dynamically import it on the client only.
Replace your import MyComponent from 'react-full-page-scroller' with the following lines:
import dynamic from 'next/dynamic'
const MyComponent = dynamic(() => import('react-full-page-scroller'), {
ssr: false
})
Related
I have a chat app, this is just like a chatbot. So I am not using any database, all the messages are temporary. So I decided to use JavaScript arrays, whenever the user types anything in the TextInput and presses the button, it pushes that message to the array. And in another place, I am mapping everything from the array and displaying them in the screen using <Text> component. Now, the Text component isn't showing any data which is pushed to the array, it only shows the dummy messages I entered to check them. Check out the code below:
import { React, useState } from 'react';
import { Alert, ScrollView, SafeAreaView, Text, StyleSheet, TextInput, Button, TouchableHighlight, Image } from 'react-native';
function ChatWindow(props) {
const [userMessage, setUserMessage] = useState("");
const [isTextInputFocused, setFocused] = useState(false);
const styles = StyleSheet.create({
mainSafeAreaView: {
flex: 1,
backgroundColor: 'white',
},
bottomSafeAreaView: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: '93%',
left: '2%',
bottom: '2%',
marginBottom: '10%',
flexDirection: 'row',
justifyContent: 'space-between'
},
userMessageTextInput: {
height: 40,
width: 300,
borderColor: isTextInputFocused == true ? "blue" : "gray",
alignItems: 'center',
borderWidth: 1,
borderRadius: 20,
paddingLeft: 10,
paddingRight: 10
},
sendButton: {
marginLeft: 5,
height: 40,
width: 40
},
usersMessage: {
backgroundColor: "#3386ff",
borderRadius: 20,
padding: 7,
margin: 3,
color: "white",
textAlign: "center"
},
userMessageAreaView: {
flexDirection: "row",
justifyContent: "flex-end",
marginRight: 10
},
botMessage: {
backgroundColor: "#e7e0e0",
borderRadius: 20,
padding: 7,
margin: 3,
color: "black",
textAlign: "center"
},
botMessageAreaView: {
flexDirection: "row",
justifyContent: "flex-start",
marginLeft: 10
},
scrollArea: {
marginTop: 40
}
})
var userMessagesSent = [
{sentBy: "user", content: "Bursa will be the capital of ottoman"},
{sentBy: "araf", content: "Agree"}
];
function sendMessage(messageSent) {
userMessagesSent.push({sentBy: "user", content: messageSent});
setUserMessage("");
console.log(userMessagesSent)
}
return (
<SafeAreaView style={styles.mainSafeAreaView}>
<ScrollView style={styles.scrollArea}>
{
userMessagesSent.map((item, index) =>
<SafeAreaView key={index} style={item.sentBy == "user" ? styles.userMessageAreaView : styles.botMessageAreaView}>
<Text key={index} style={item.sentBy == "user" ? styles.usersMessage : styles.botMessage}>{item.content}</Text>
</SafeAreaView>
)
}
</ScrollView>
<SafeAreaView style={styles.bottomSafeAreaView}>
<TextInput
value={userMessage}
style={styles.userMessageTextInput}
placeholder="Enter a message"
onChangeText={(text) => setUserMessage(text)}
onFocus={() => setFocused(true)}
onSubmitEditing={() => setFocused(false)}
onEndEditing={() => setFocused(false)}
/>
<TouchableHighlight
onPress={() => sendMessage(userMessage)}
underlayColor={'white'}
>
<Image
source={require(".././assets/send.png")}
style={styles.sendButton}
resizeMode='cover'
/>
</TouchableHighlight>
</SafeAreaView>
</SafeAreaView>
);
}
export default ChatWindow;
I really have to complete the app fast, so if you could help me then it would be great.
you're using a variable to store state. If you want the data to persist then you need to use useState(). Otherwise when the data changes your component wont re-render. Thats why you arent seeing the update. For more information on using variables vs state see this stack overflow question
const [userMessageSent, setUserMessageSent] = useState([
{sentBy: "user", content: "Bursa will be the capital of ottoman"},
{sentBy: "araf", content: "Agree"}
])
function sendMessage(messageSent) {
setUserMessagesSent(prevState => ([...prevState, {sentBy: "user", content: messageSent}])
setUserMessage("");
}
I think it has something to do with the way you save massages. Is there a specific reason why you are not saving your array with the messages in the state? Maybe that would fix your problem
I'm trying to put like a logo/picture in my app. I am already using BackgroundImage so I want to put Image on top of the background. Check my code below. Please help me figure it out.
import React from 'react';
import { StyleSheet, Text, View, ImageBackground, Image } from 'react-native';
export default class App extends React.Component {
render() {
return (
<ImageBackground source={require('./app/img/baky.jpeg')} style={styles.container}>
<View style={styles.inner}>
<Image source={require('./app/img/logo.png')} style={styles.logo}> </Image>
<Text style={styles.txt}> Hello!!!! </Text>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
inner: {
padding: '10%',
justifyContent: 'center',
flexDirection: 'row',
width: '100%',
height: '100%',
backgroundColor: 'rgba(255, 255, 255, .7)'
},
logo: {
width: 50,
height: 50
},
txt: {
color: 'black',
}
});
I am trying to place an Avatar element over my TextInput so that it will look like a conventional search bar, but it doesn't go over the TextInput Please isn't it working, or can another better method of putting the search icon over the TextInput be suggested, Thank you
import { Avatar } from 'react-native-elements';
import FontAwesome
from './node_modules/#expo/vector-icons/fonts/FontAwesome.ttf';
import MaterialIcons
from './node_modules/#expo/vector-icons/fonts/MaterialIcons.ttf';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {timePassed: false};
}
state = {
fontLoaded: false
};
async componentWillMount() {
try {
await Font.loadAsync({
FontAwesome,
MaterialIcons
});
this.setState({ fontLoaded: true });
} catch (error) {
console.log('error loading icon fonts', error);
}
}
render() {
setTimeout(() => {
this.setState({timePassed: true})
}, 4000);
if (!this.state.timePassed) {
return <Splash/>;
} else {
return (
<View style={BackStyles.container}>
<Avatar style={BackStyles.searchIcon} icon={{ name: 'search', size: 25, }}/>
<TextInput placeholder="Search for your herbs.."
underlineColorAndroid={'transparent'} style={BackStyles.textBox}
/></View>
);
}
}
}
const BackStyles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'flex-start',
alignSelf: 'stretch',
flex: 1,
backgroundColor: '#E2E2E2',
marginTop: 20,
// width: '100%'
},
textBox: {
flex: 1,
height: 45,
padding: 4,
// textAlignVertical: 'top',
paddingLeft: 20,
// marginRight: 5,
flexGrow: 1,
// fontSize: 18,
color: '#000',
backgroundColor: '#fff',
// textAlign: 'center'
},
searchIcon:{
position: 'absolute',
alignSelf: 'stretch',
height: 45,
flex: 1,
top: 50,
flexGrow: 1,
padding: 4
}
});
You can use Flexbox's justifyContent feature to force the TextInput to the left and the search icon to the right. If you put a border on the container and not the TextInput, the entire thing will appear as there is a search icon fixed onto the right of the TextInput, when, in reality, they are two separate components.
// styles
const styles = StyleSheet.create({
searchBox: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderWidth: 1,
borderColor: 'black',
},
});
// the component
<View style={styles.searchBox}>
<TextInput ...yourprops />
<Avatar ...yourprops />
</View>
If you want to read more about justifyContent and how godly Flexbox is, you should check out Chris Coyier's Flexbox guide.
I am new to react native this is my first attempt in react native I was following a sample tutorial for the basic understanding of the code and other things I am following this raywenderlich's propertyfinder example, while implementing the first navigation example I am facing this issue:
undefined is not a function (evaluating 'this.props.renderScene(route,this)')
in my android device(Samsung J7) which I am using to run the app
Here is my index.android.js
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var SearchPage = require('./SearchPage');
var styles = ReactNative.StyleSheet.create({
text: {
color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80
},
container: {
flex: 1
}
});
class PropertyFinderApp extends React.Component {
render() {
return (
<ReactNative.Navigator
style={styles.container}
renderScene={this.renderScene}
initialRoute={{
component: SearchPage,
index:0,
title:"home"
}}/>
);
}
}
ReactNative.AppRegistry.registerComponent('PropertyFinder', function() { return PropertyFinderApp });`
and the SearchPage.js file(the other component which I am using):
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicator,
Image
} from 'react-native';
var styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565'
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center'
},
flowRight: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'stretch'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
flex: 1,
flexDirection: 'row',
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
searchInput: {
height: 36,
padding: 4,
marginRight: 5,
flex: 4,
fontSize: 18,
borderWidth: 1,
borderColor: '#48BBEC',
borderRadius: 8,
color: '#48BBEC'
}
});
export default class SearchPage extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name, postcode or search near your location.
</Text>
<View style={styles.flowRight}>
<TextInput
style={styles.searchInput}
placeholder='Search via name or postcode'/>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
</View>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Location</Text>
</TouchableHighlight>
</View>
);
}
}
module.exports = SearchPage;
I have no idea what I am doing wrong since I am a beginner in this any help will be appreciated, thanx in advance.
You for got to write renderScene function, see following example:
<ReactNative.Navigator
...
renderScene={this.renderScene.bind(this)} />
renderScene(route, navigationOperations, onComponentRef) {
switch(route.index) {
case 0:
return <SearchPage />
}
}
I'm reading Learning React Native by Bonnie Eisenman and am having trouble with the WeatherProject tutorial in chapter 3. When the app loads in the iOS simulator, it appears to be rendering the contents of Forecast.js but taking up the whole display without anything from WeatherProject.js
Here is my code:
index.ios.js
import {
AppRegistry,
} from 'react-native';
import WeatherProject from './WeatherProject';
AppRegistry.registerComponent('WeatherProject', () => WeatherProject);
WeatherProject.js
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
} from 'react-native';
var Forecast = require('./Forecast');
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#4D4D4D'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
},
input: {
fontSize: 20,
borderWidth: 2,
height: 40
}
});
var WeatherProject = React.createClass({
getInitialState() {
return {
zip: '',
forecast: {
main: 'Clouds',
description: 'few clouds',
temp: 45.7
}
}
},
_handleTextChange(event) {
console.log(event.nativeEvent.text);
this.setState({
zip: event.nativeEvent.text
});
},
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
You input {this.state.zip}.
</Text>
<Forecast
main={this.state.forecast.main}
description={this.state.forecast.description}
temp={this.state.forecast.temp}/>
<TextInput
style={styles.input}
returnKeyType="go"
onSubmitEditing={this._handleTextChange}/>
</View>
);
}
});
module.exports = WeatherProject;
Forecast.js
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
var styles = StyleSheet.create({
bigText: {
flex: 2,
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#FFFFFF'
},
mainText: {
flex: 1,
fontSize: 16,
textAlign: 'center',
color: '#FFFFFF'
}
});
var Forecast = React.createClass({
render() {
return (
<View>
<Text style={styles.bigText}>
{this.props.main}
</Text>
<Text style={styles.mainText}>
Current conditions: {this.props.description}
</Text>
<Text style={styles.bigText}>
{this.props.temp}°F
</Text>
</View>
);
}
});
module.exports = Forecast;
The expected outcome looks like this (from the book):
But my actual outcome is this:
And here is the view debug hierarchy:
Any help at all would be greatly appreciated.
Add this style in Forecast:
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
then add the style into the View:
<View styles={style.container}>