react-native-cn-quill QuillToolbar touch is not responsive - react-native

I am using react-native-cn-quill as a text editor in my android app. QuillToolbar touch is not responsive. When I am trying to select an option from the toolbar sometimes it's not being selected and after clicking to superscript/subscript option the keyboard view exit automatically. any solution regarding this?
I am using example code
import React from 'react';
import { SafeAreaView, StyleSheet, StatusBar } from 'react-native';
import QuillEditor, { QuillToolbar } from 'react-native-cn-quill';
export default function App() {
const _editor = React.createRef();
return (
<SafeAreaView style={styles.root}>
<QuillToolbar editor={_editor} options="full" theme="light" />
<QuillEditor
style={styles.editor}
ref={_editor}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
title: {
fontWeight: 'bold',
alignSelf: 'center',
paddingVertical: 10,
},
root: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
backgroundColor: '#eaeaea',
},
editor: {
flex: 1,
padding: 0,
borderColor: 'gray',
borderWidth: 1,
marginHorizontal: 30,
marginVertical: 5,
backgroundColor: 'white',
},
});

Related

Text strings must be rendered within a <Text> component. When creating a button

I'm new to react native and trying to create a button, here is my StartScreen:
import React from 'react' import Background from '../components/Background' import AppButton from '../components/AppButton'
export default function StartScreen({ navigation }) {
return(
<Background>
<AppButton title="HEEEY!" size="sm" backgroundColor="#007bff" />;
</Background>
) }
Here is my AppButton:
import React from 'react'
import { StyleSheet, TouchableOpacity, Text } from "react-native";
export default function AppButton ({ onPress, title, size, backgroundColor }) {
return (
<TouchableOpacity
onPress={onPress}
style={[
styles.appButtonContainer,
size === "sm" && {
paddingHorizontal: 8,
paddingVertical: 6,
elevation: 6
},
backgroundColor && { backgroundColor }
]}
>
<Text style={[styles.appButtonText, size === "sm" && { fontSize: 14 }]}>
{title}
</Text>
</TouchableOpacity>
)
};
const styles = StyleSheet.create({
screenContainer: {
flex: 1,
justifyContent: "center",
padding: 16
},
appButtonContainer: {
elevation: 8,
backgroundColor: "#009688",
borderRadius: 10,
paddingVertical: 10,
paddingHorizontal: 12
},
appButtonText: {
fontSize: 18,
color: "#fff",
fontWeight: "bold",
alignSelf: "center",
textTransform: "uppercase"
}
});
Here is my Background:
import React from 'react'
import { ImageBackground, StyleSheet, KeyboardAvoidingView } from 'react-native'
import { theme } from '../core/theme'
export default function Background({ children }) {
return (
<ImageBackground style={styles.background}>
<KeyboardAvoidingView style={styles.container} behavior="padding">
{children}
</KeyboardAvoidingView>
</ImageBackground>
)
}
const styles = StyleSheet.create({
background: {
flex: 1,
width: '100%',
backgroundColor: theme.colors.surface,
},
container: {
flex: 1,
padding: 20,
width: '100%',
maxWidth: 340,
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
},
})
When I try to run the application in my Android phone I get the following error:
Error: Text strings must be rendered within a component.
Blockquote
But I cant figure out where this error happens. Can someone spot the mistake?
You have an unnecessary semicolon (;) in your StartScreen JSX, remove it.
export default function StartScreen({ navigation }) {
return(
<Background>
<AppButton title="HEEEY!" size="sm" backgroundColor="#007bff" />
</Background>
); }

React Native Can't set margin after image

Why can't I separate the last two components?
First, I tried to set justifyContent, but it did not work.
Then, I tried to set margin. It works for title and image, but not for components after Image
I think is because I'm setting image height, but without it image will not appear
import React, {useState, useEffect} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
const Card = ({ evento }) => {
return (
<View style={styles.card_container}>
<Text style={styles.titulo}>
{evento.titulo} - R$ {evento.valor}
</Text>
<Image
style={styles.img}
source={{uri: 'https://via.placeholder.com/150'}}
/>
<Text styles={styles.descricao}>{evento.descricao}</Text>
<Text styles={styles.guia}>Organizador: {evento.guia}</Text>
</View>
);
};
const styles = StyleSheet.create({
card_container: {
// flex: 1,
// display: 'flex',
// flexDirection: 'column',
// justifyContent: 'space-between',
fontFamily: 'Rubik-Light',
margin: 3,
marginBottom: 15,
padding: 10,
borderRadius: 10,
backgroundColor: '#ffffff',
elevation: 1,
},
titulo: {
fontFamily: 'Rubik-Medium',
margin: 10,
},
img: {
//alignSelf: 'center',
width: 350, //TODO tamanho dinĂ¢mico
height: 200,
marginBottom: 10, // word
},
descricao: {
marginBottom: 10,
},
guia: {
marginTop: 10
}
});
export default Card;
It's a typo on the Text component. It should be style for the prop in Text component not styles. Here are the correct codes for the last two components.
<Text style={styles.descricao}>{evento.descricao}</Text>
<Text style={styles.guia}>Organizador: {evento.guia}</Text>

Parallel view inside a view in ReactNative

I'm trying to generate a component with a search bar inside a view and a couple of buttons inside other view. Something like this:
Expected
I develop this piece of code but I'm not able to do this parallel view.
import React from "react";
import { StyleSheet, View, FlatList, Image, Text, Item } from "react-native";
import { colorUtil } from "../../constants/Colours";
import { SearchBar, Button } from 'react-native-elements';
export default class App extends React.Component {
state = {
search: '',
};
updateSearch = search => {
this.setState({ search });
};
render() {
const { search } = this.state;
const styles = StyleSheet.create({
searchBarContainer: {
borderBottomWidth: 1,
borderBottomColor: '#e2e2e2',
height: 64,
backgroundColor: '#FFFFFF'
},
searchBarField: {
position: 'relative',
margin: 0,
width: '48%',
//padding: 44,
//fontSize: 14,
borderRadius: 80,
backgroundColor: '#E5E7E8'
},
btnField: {
borderBottomWidth: 1,
borderBottomColor: '#e2e2e2',
height: 64,
backgroundColor: '#FFFFFF'
}
});
return (
<View style={styles.searchBarContainer}>
<View style={styles.searchBarField}>
<SearchBar
lightTheme
onChangeText={this.updateSearch}
onClearText={this.updateSearch}
value={search}
icon={{ type: 'font-awesome', name: 'search' }}
placeholder='Find' />
</View>
<View style={styles.btnField}>
<Button
title="Solid Button"
/>
</View>
</View>
);
}
}
But the result is not equal to. How can I make this fields parallel?
You have to set the flex direction of parent view to row to place everything in the same line.
Also removing the height property will align the content properly.
searchBarContainer: {
borderBottomWidth: 1,
borderBottomColor: '#e2e2e2',
height: 64,
backgroundColor: '#FFFFFF',
flexDirection: 'row',
alignItems: 'center',
},
btnField: {
borderBottomWidth: 1,
borderBottomColor: '#e2e2e2',
backgroundColor: '#FFFFFF',
},

How to set one icon in left and text in center in header in react native

Am trying to set my icon in left and text in center (like Image which I have give) in header by using flex but they both are going in center how to solve it.
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native'
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.cross}>X</Text>
<Text style={styles.headerText}>Invester Profile</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
header: {
backgroundColor:'#212121',
height: 159.9,
flexDirection: 'row',
},
headerText: {
color: 'white',
marginTop: 20,
textAlign: 'center',
},
cross: {
color: 'white',
marginTop: 20,
}
})
Just add flex: 1 to headerText. Like this:
headerText: {
color: 'white',
marginTop: 20,
textAlign: 'center',
flex: 1
}

React-Native: TouchableOpacity Rendering issue

I have some issue while rendering TouchableOpacity
import React ,{Component} from 'react';
import {View, TouchableOpacity, Text} from 'react-native';
class Button extends Component {
render() {
return(
<TouchableOpacity onPress= {this.props.onPress}
style = {style.buttonStyle}>
<Text style = {style.textStyle}>{this.props.name}</Text>
</TouchableOpacity>
);
}
}
const style = {
textStyle:{
fontSize: 16,
alignSelf: 'center',
color: '#007aff',
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
},
buttonStyle: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#000',
borderColor: '#007aff',
borderWidth: 1,
borderRadius: 5,
marginLeft: 5,
marginRight: 5
}
}
export {Button};
this is the code for my button component and My button looks like this when i render it
And i used the same component In Login Component and it worked fine...
Expected Button: