EDIT: As near as I can tell, the GridLayout's size is set by whatever it would be if all the cells were a single column. So is it just not updating after everything is added?
I am trying to expose GridLayout to React Native, and I'm finding this bizarre issue where the table sets its size to the size of the first child, and then every other child renders outside of the table.
And the only thing I can find that even gets the cells to render inside the table is to set their layoutParams.width and layoutParams.height to 0 and give them a positive weight, but then that refuses to wrap the contents.
What the heck is going on???
NOTE: This is is the opposite of the most common question I saw where people couldn't figure out how to get all columns to be the same width or some percentage. I want the columns to shrink to match the content.
Here's the full repo
App.tsx
import * as React from 'react';
import { Text, View } from 'react-native';
import { TableView } from '#mackenziehnc/table';
export default function App() {
const data = ['Cell 1', 'Cell 2', 'Cell 3', 'Cell 4', 'Cell 5', 'Cell 6'];
return (
<View style={{ width: 200, borderWidth: 3, borderColor: 'red' }}>
<TableView>
{data.map((child, index) => (
<View
key={index}
style={{ borderWidth: 1, flexShrink: 1, flexDirection: 'row' }}
>
<Text style={{ flexShrink: 1, borderWidth: 1 }}>{child}</Text>
</View>
))}
</TableView>
</View>
);
TableViewNativeComponent.ts
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';
export default codegenNativeComponent<ViewProps>('TableView');
TableViewManager.java
package com.mackenziehnc.table;
import com.facebook.react.module.annotations.ReactModule;
import com.facebook.react.uimanager.ThemedReactContext;
#ReactModule(name = TableViewManager.NAME)
public class TableViewManager extends com.mackenziehnc.table.TableViewManagerSpec<TableView> {
public static final String NAME = "TableView";
#Override
public String getName() {
return NAME;
}
#Override
public TableView createViewInstance(ThemedReactContext context) {
return new TableView(context);
}
}
TableView.java
package com.mackenziehnc.table;
import android.content.Context;
import android.view.View;
import android.widget.GridLayout;
public class TableView extends GridLayout {
public TableView(Context context) {
super(context);
this.setColumnCount(2); // I know this is bad, this is temporary
}
#Override
public void addView(View child, int index) {
GridLayout.LayoutParams params = new GridLayout.LayoutParams();
params.rowSpec = GridLayout.spec(index / getColumnCount());
params.columnSpec = GridLayout.spec(index % getColumnCount());
child.setLayoutParams(params);
super.addView(child, index);
}
}
Related
In his video, in the last part, he says that at the time of his Recording in iOS the padding is not applying when he applies it in the Screen component, but it actually works on Android. And at the end, when you do exactly what he suggests, a double layer of padding is added in the Android version.
import React from 'react';
import { View, SafeAreaView, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
function SafeScreen({children, style}) {
return (
<SafeAreaView style={[styles.screen, style]}>
<View style={style}>{children}</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
screen: {
paddingTop: Constants.statusBarHeight,
flex: 1,
}
})
export default SafeScreen;
I did find the Fix myself so look at my answer.
Here is the Fix that I did:
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
function SafeScreen({children, style}) {
return (
<View style={[styles.screen ,style]}>{children}</View>
);
}
const styles = StyleSheet.create({
screen: {
paddingTop: Constants.statusBarHeight,
flex: 1,
},
})
export default SafeScreen;
Just simply don't use the SafeAreaView by React Native and instead apply the screen styling to the View.
I trying to add a video for my splash screen in my react-native app I added some lines of code and get no errors but the splash screen video doesn't play when starting the app by clicking the icon on an android phone or emulator. I created a folder where the video is. Any feedback is appreciated :)
import React, {useEffect} from 'react'
import {StyleSheet, View, Video, Text, Image} from 'react-native'
import Color from '../utils/Colors'
import Images from '../const/Images'
import Constants from '../const/Constants'
import firebase from '../firebase/Firebase'
import Video from '../video/Video'
function SplashScreen({navigation}){
useEffect(()=> {
NavigateToAuthORGroupScreen()
}, [navigation])
function NavigateToAuthORGroupScreen(){
setTimeout(function (){
firebase.auth().onAuthStateChanged((user) => {
if (user != null){
navigation.reset({
index:0,
routes: [{name: 'Groups Screen'}]
})
}else{
navigation.reset({
index:0,
routes: [{name: 'SignInScreen'}]
})
}
})
},2600)
}
return(
<View style = {styles.constainer}>
<Image style = {styles.logo} source = {Images.logo}></Image>
<Video style = {styles.video} source = {Images.video} autoPlay loop></Video>
</View>
)
}
const styles = StyleSheet.create({
video:{
width: '100%',
height: 0.06 * Constants.screenHeight
},
logo: {
alignSelf: 'center',
margin: 0.04 * Constants.screenHeight
},
constainer: {
flex: 1,
justifyContent: 'center',
alignItems:'center',
backgroundColor: Color.vibenote
}
})
export default SplashScreen
Images.js file: below
const images = {
logo: require('../../assets/logo.png'),
add: require('../../assets/add.png'),
logout: require('../../assets/logout.png'),
groups: require('../../assets/groups.png'),
video: require('../../assets/vnspl.mp4')
Can You Please Show the error that you get?
One more thing you called VideoView but I can't see you import any VideoView in your code.
I have a FlatList with some elements where the top element should overlap the bottom element. For this, I wanted to reverse the zIndex, but the FlatList keeps overwriting my zIndex.
In the code below I tried to reverse the zIndex with zIndex: 0 - index but it doesn't work
import React, { Component } from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";
export default class App extends React.Component {
_renderPost({ index }) {
return <View style={[styles.item, { zIndex: 0 - index, }]} />;
}
render() {
return <FlatList data={[1, 2, 3, 4, 5,]} renderItem={this._renderPost} />;
}
}
const styles = StyleSheet.create({
item: {
height: 200,
borderWidth:2,
borderBottomLeftRadius:50,
borderBottomRightRadius:50,
marginBottom: -50,
backgroundColor:"white",
},
});
link to Expo Snack
I haven't managed to do it with the help of zIndex, since the Problem seems to be setting zIndex from the index, it just doesn't seem to work.
The way I managed to do it, would be by inverting the FlatList, and using a style for inverted column flex direction so that it actually is scrolled to the top as well. Do note that this would effectively also display the Posts in reverse order, so flipping the underlying arrays would be necessary to achieve the wanted results
import React, { Component } from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";
export default class App extends React.Component {
_renderPost({ index }) {
return <View style={styles.item} />;
}
render() {
return <FlatList style={styles.container} inverted data={[1, 2, 3, 4, 5,]} renderItem={this._renderPost}/>;
}
}
const styles = StyleSheet.create({
item: {
height: 200,
borderWidth:2,
borderBottomLeftRadius:50,
borderBottomRightRadius:50,
marginBottom: -50,
backgroundColor:"white",
},
container: {
flexDirection: 'column-reverse'
}
});
I have a list view in which list item component is designed by me.
If I render listItem alone it is working fine but after integrating ith with SearchBar I am not able to render them even though am able to get object matching a particular search
SearchListItem
import React from 'react';
import {Image, Text, View} from "react-native";
export default class SearchListItem extends React.Component
{
render()
{
return (
<View style={{flexDirection: 'row'}}>
<Image source={{uri: this.props.src}}
style={{width: 50, height: 50, backgroundColor: '#fff'}} />
<Text style={{height: 50, lineHeight: 50, width: '100%',textAlign: 'center', flex:1, backgroundColor: '#FFF'}}>{this.props.text}</Text>
</View>
)
}
}
App.js
import React from 'react';
import {FlatList, StyleSheet, Text, TextInput, View} from 'react-native';
import SearchListItem from "./components/SearchListItem";
import { SearchBar } from 'react-native-elements';
import { includes } from 'lodash';
export default class App extends React.Component {
constructor(props)
{
super(props);
this.all_categories = [
{
"id": "1",
"text": "abc",
"src": "https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
},
{
"id": "2",
"text": "dbef",
"src": "https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
},
{
"id": "3",
"text":"bghi",
"src":"https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
},
{
"id": "4",
"text":"jbkl",
"src":"https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
}
];
this.state = {text:"",
categories: []
}
}
search(text)
{
var searchResults = [];
var categories = this.all_categories;
for (var i = categories.length - 1; i >= 0; i--)
{
includes(categories[i]['text'], text) && searchResults.push(categories[i])
}
console.log("text searched is " + text);
console.log(searchResults);
return searchResults;
}
_keyExtractor = (item, index) => item.id;
_renderItem(item)
{
console.log("item to render is");
console.log(item);
return <SearchListItem text={item.text} src={item.src}/>
}
render() {
console.log("rendered");
console.log("categories to display are");
console.log(this.state.categories);
return (
<View>
<View style={{height:30,width:"100%"}}/>
<SearchBar
round
lightTheme
containerStyle={{
backgroundColor:'transparent',
borderTopWidth: 0,
borderBottomWidth: 0,
}}
placeholder="Search!"
inputStyle = {{backgroundColor:'white'}}
onChangeText={ (text) =>
{
let result = this.search(text);
console.log("changing state");
this.setState({categories:result, text:text})
}}
value={this.state.text}
/>
<FlatList style={{flex:1}}
removeClippedSubviews={false}
data={this.state.categories}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</View>
)
}
}
Searching gives all the valid results but not able to show the list corresponding to the results.What I have done wrong?
Running your code I found two little mistakes:
First one is in _renderItem param, which has to be like
_renderItem({item})
{
console.log("item to render is");
console.log(item);
return <SearchListItem text={item.text} src={item.src}/>
}
as destructuring suggest (see doc).
Second one causes your list not rendering:
try remove that style={{flex:1}} in FlatList props.
I've just created a snack if you want to check it:
I just have started to learn React Native, and I'm following official tutorial, both in my emulator and phone (Android), image doesn't appear, just empty white screen. So my question, why it doesn't displayed on the screen? P.S: internet connection works fine.
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}}/>
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);
You're doing the Image part correctly, I believe you just need to wrap it in a view.
import React, { Component } from 'react';
import { AppRegistry, Image, View } from 'react-native';
class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<View style={{flex: 1}}>
<Image source={pic} style={{width: 193, height: 110}}/>
</View>
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);