I am trying to use this package to create a range slider:
https://www.npmjs.com/package/react-native-range-slider
import React from 'react';
import { Platform, StyleSheet, Text, View, Image, Switch, Button } from "react-native";
import { createAppContainer } from 'react-navigation';
import DatePicker from 'react-native-datepicker';
import RangeSlider from 'react-native-range-slider';
<View style={{flex: 1, flexDirection: 'row'}}>
<RangeSlider
minValue={0}
maxValue={100}
tintColor={'#da0f22'}
handleBorderWidth={1}
handleBorderColor="#454d55"
selectedMinimum={20}
selectedMaximum={40}
style={{ flex: 1, height: 70, padding: 10, backgroundColor: '#ddd' }}
onChange={ (data)=>{ console.log(data);} }
/>
</View>
however keep running into the error:
Invariant Violation: requireNativeComponent: "RangeSlider" was not found in UIManager.
I was able to successfully install the package and ran
react-native link react-native-range-slider to link the library as well but I still get the error.
I am running:
react-native-cli: 2.0.1 and
react-native: 0.59.8
Can someone please help me out in fixing the issue?
You will receive this error on Android as it's only supported for iOS as of current.
Related
I'm trying to integrate the 3d cover flow for the project, but the coverflow not working as expected, I included image and code. Thanks in Advance for the help!
I have tried using the lastest package, i found that is not working, so i tried these old version, that also not working, the version which i used is "react-id-swiper": "2.3.2", "swiper": "^6.1.2".
code :
import React from 'react'
import Swiper from 'react-id-swiper';
import 'react-id-swiper/lib/styles/css/swiper.css';
import './App.css';
class App extends React.Component{
render() {
const params = {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true
},
pagination: {
el: '.swiper-pagination'
}
}
return (
<React.Fragment >
<Swiper {...params}>
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/1)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/2)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/3)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/4)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/5)' }} />
</Swiper>
</React.Fragment>
);
};
}
export default App;
output :
How is it going brother. I also had the same problem and I realized one of the reason is that the latest of version of the swiper package is missing some css (you need the swiper package if you want to use react-id-swiper). For react-id-swiper it is okay to install the latest version, but downgraded the swiper package to 5.3.8 did the trick.
Let me know if this solves the issue.
I just started learning React-Native. I am facing issue while trying to render image on to the screen, it is not appearing. I have tried so many solutions from Google and stack overflow but could not able to solve the issue.
Can someone please help me. Below are the details.
I am using RN 0.53.0 for Android with atom editor. Please let me know if you need more details.
This is where I am extracting data: http://rallycoding.herokuapp.com/api/music_albums
import React from 'react';
import { Text, View, Image, Linking } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
import Button from './Button';
const AlbumDetail = ({ album }) => {
const {
title,
artist,
thumbnail_image,
image,
url
} = album;
const {
headerContentStyle,
thumbnailStyle,
thumbnailContainerStyle,
imageStyle
} = styles;
return (
<Card>
<CardSection>
<View style={thumbnailContainerStyle}>
<Image style={thumbnailStyle} source={{ uri: thumbnail_image }} />
</View>
<View style={headerContentStyle}>
<Text style={{ fontSize: 18 }}>{title}</Text>
<Text>{artist}</Text>
</View>
</CardSection>
<CardSection>
<View>
<Image style={imageStyle} source={{ uri: image }} />
</View>
</CardSection>
<CardSection>
<Button onPress={() => Linking.openURL(url)}>
Purchase
</Button>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
thumbnailStyle: {
height: 50,
width: 50
},
thumbnailContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
marginLeft: 10,
marginRight: 10
},
imageStyle: {
height: 350,
width: null,
flex: 1,
justifyContent: 'center'
}
};
export default AlbumDetail;
Here is your code :
Please remove View tag from the image
<CardSection>
<Image style={imageStyle} source={{ uri: image }} />
</CardSection>
stylesheet : for imageStyle
imageStyle: {
height: 300,
width: null,
flex: 1,
}
Please check it and let me know if it working or not.
Here:
imageStyle: {
height: 350,
width: null,
flex: 1,
justifyContent: 'center'
}
You have set the image width to null. Try setting it to a reasonable value.
You need add the style to Image with height and width.
in your code you are not adding the style, try this:
<Image style={styles.imageStyle} source={{ uri: image }} />
Add too a valid size for height and width when you are using a image from internet.
I currently write a news reader app in react-native and want to style the first letter of an article as an initial, like below:
For my first attempt I use the nested text aproach. The code is attached below. And this is my current result:
The code in the render function:
<View style={styles.container}>
<Text style={styles.text}>
<Text style={styles.initial}>W</Text>
<Text>
elcome to React Native! To get started, edit index.android.js To get started, edit index.android.js To get started, edit index.android.js
</Text>
</Text>
</View>
My stylesheet:
const fontSize = 14;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
initial: {
fontSize: fontSize * 2,
},
text: {
fontSize: fontSize,
color: '#333333',
},
});
My Question:
How can I style my first char to get a pretty initial?
Environment
react: 16.0.0-alpha.6
react-native: 0.44.2
Android 6.0 on an emulated Nexus 5
you can try in this way too, add the regular style for parent Text element and required style for the "W" text child element.
export default class DemoProject extends Component {
render() {
return (
<View style={styles.container}>
*<Text>
<Text style={[styles.textCommon, styles.firstLetter]}>W</Text>
elcome</Text>*
</View>
);
}
}
text: {
fontSize: fontSize,
color: '#333333',
}
This is one way of doing it:
export default class DemoProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={[styles.textCommon, styles.firstLetter]}>W</Text>
<Text>elcome</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection: 'row'
},
textCommon: {
color: '#333333',
},
firstLetter: {
fontSize: 23,
}
});
I think this is the best solution for your question
How can I make the first letter push itself into the paragraph like a newspaper style?
just convert css to react-style
I'm getting the following error:
Dec 16 20:03:26 NathanHyland Bunny[21876]: Unable to resolve module socket.io-client/socket.io from /Users/nhyland/Documents/react-native/Bunny/index.ios.js: Invalid directory /Users/node_modules/socket.io-client/socket.io
Dec 16 20:03:26 NathanHyland syslogd[21710]: ASL Sender Statistics
My index.io.js:
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
import './UserAgent';
window.navigator.userAgent = "react-native";
var _ = require('lodash');
var io = require('socket.io-client/socket.io');
class Bunny extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<TouchableHighlight onPress={() => {
}}><Text>Test</Text></TouchableHighlight>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Bunny', () => Bunny);
I've tried to link directly to the folder/file in node_modules and that doesn't work, I've tried different ways of importing and no bueno.
It installs just fine via npm install socket.io-client, I can see it in node-modules.
Any idea why it won't let me import?
For people who land on this issue in future try include the "dist" folder in your require path like this:
var io = require('socket.io-client/dist/socket.io');
See the github issue discussing this here.
import io from 'socket.io-client';
===============
package.json file
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"socket.io-client": "2.0.3"
}
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
=============================================
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native';
I'm trying to make a <View> called footer stick at the bottom of the right container.
Here is a live example:
https://rnplay.org/apps/G3rHqQ
If I make the left container higher than the right one then it won't work. If the right container is higher than the left one then it works....
The red and orange elements are dynamic, have different height depending on their content. The blue one, instead, should always stick to the bottom of the right container.
I have also tried with position: 'absolute'; bottom:0; left: 0; right: 0; and it does stick to the bottom but only IF the right container is higher than the left one.
It looks like you need to set a flex:1 on the outermost container to get the flex properties working the way you want. I've set up a working project here and pasted the code below as well.
https://rnplay.org/apps/WoceXg
'use strict';
import React, { AppRegistry, StyleSheet, View, Text } from 'react-native';
const SampleApp = React.createClass({
render: function() {
return (
<View style={{ flex:1 }}>
<View style={styles.wrapper}>
<View style={styles.left}>
<Text>Left</Text>
<Text>Left</Text>
<Text>Left</Text>
<Text>Left</Text>
<Text>Left</Text>
<Text>Left</Text>
<Text>Left</Text>
<Text>Left</Text>
<Text>Left</Text>
</View>
<View style={styles.right}>
<View style={styles.rightInner}>
<View style={styles.content}>
<Text>content</Text>
<Text>content</Text>
</View>
<View style={styles.footer}>
<Text>Sticky</Text>
</View>
</View>
</View>
</View>
<View style={{ flex:1 }}></View>
</View>
);
},
});
const styles = StyleSheet.create({
wrapper: {
flexDirection: 'row',
paddingTop: 50,
flex:1
},
left: {
backgroundColor: 'lightblue',
flex: 1,
},
right: {
backgroundColor: 'lightgreen',
flex: 4,
},
rightInner: {
flex: 1,
backgroundColor: 'orange',
},
content: {
flex: 1,
},
footer: {
backgroundColor: 'green',
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
I'm trying to do something similar. I need a View to stick to the bottom. I used poistion: 'absolute', bottom:0 and it does stick to the bottom but the width of the view does not stretch anymore.