Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

If it's not in the App.js file the library I can't set the space limit and the zoom scroll doesn't work well #79

Open
mrmarino023 opened this issue Dec 13, 2023 · 2 comments
Open

If it's not in the App.js file the library I can't set the space limit and the zoom scroll doesn't work well #79

mrmarino023 opened this issue Dec 13, 2023 · 2 comments

Comments

@mrmarino023
Copy link

Expo, Iphone
@mrmarino023
Copy link
Author

import * as React from 'react';
import {
StyleSheet,
Dimensions,
TouchableOpacity,
View,
Text,
Image,
Animated,
Button,
} from 'react-native';
// @ts-ignore
import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
import Ionicons from '@expo/vector-icons/Ionicons';
var SCREEN_HEIGHT = Dimensions.get('window').height;
const ITEM_WIDTH = Dimensions.get('window').width;

export default function GalaxyTab2() {
const zoomAnimatedValue = React.useRef(new Animated.Value(1)).current;
const scale = Animated.divide(1, zoomAnimatedValue);
const [showMarkers, setShowMarkers] = React.useState(true);

function TabBarIcon(props) {
    return <Ionicons size={30} style={{}} {...props} />;
}
return (
    <View style={styles.container}>
        <Text>ReactNativeZoomableView</Text>
        <View style={styles.box}>
            <ReactNativeZoomableView
                maxZoom={5}
                zoomStep={0.5}
                pinchToZoomInSensitivity={5}
                // Give these to the zoomable view so it can apply the boundaries around the actual content.
                // Need to make sure the content is actually centered and the width and height are
                // measured when it's rendered naturally. Not the intrinsic sizes.
                // For example, an image with an intrinsic size of 400x200 will be rendered as 300x150 in this case.
                // Therefore, we'll feed the zoomable view the 300x100 size.

                minZoom={0.5}
                initialZoom={1}
                bindToBorders={true}
                contentWidth={ITEM_WIDTH * 4}
                contentHeight={SCREEN_HEIGHT * 2.5}
                panBoundaryPadding={50}
                zoomAnimatedValue={zoomAnimatedValue}>
                <View
                    style={{
                        backgroundColor: 'rgba(255,255,255,0)',
                        opacity: 0.8,
                        position: 'absolute',
                        zIndex: 400,
                    }}></View>
                <View
                    style={{
                        zIndex: 2000,
                        height: SCREEN_HEIGHT * 1.4,
                        width: ITEM_WIDTH * 2.4,
                        backgroundColor: 'rgba(255,255,255,0)',
                        position: 'absolute',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}>
                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            top: 0,
                            zIndex: 300,
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    You could think of her like your choie
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon
                                        style={{ left: 1 }}
                                        name="add"
                                        color="black"
                                        size={22}
                                    />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 15,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    bottom: 4,
                                },
                            ]}>
                            frank
                        </Text>
                    </View>

                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            zIndex: 300,
                            bottom: 0,
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    She's your best found
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon
                                        style={{ left: 1 }}
                                        name="add"
                                        color="black"
                                        size={22}
                                    />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 13,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    bottom: 4,
                                },
                            ]}>
                            erding
                        </Text>
                    </View>
                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            zIndex: 300,
                            left: -130,
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    You should get in touch with her because
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon
                                        style={{ left: 1 }}
                                        name="add"
                                        color="black"
                                        size={22}
                                    />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 8,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    top: 8,
                                },
                            ]}>
                            vaness_33
                        </Text>
                    </View>
                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            zIndex: 300,
                            right: -130,
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    You should get in touch with her because
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon
                                        style={{ left: 1 }}
                                        name="add"
                                        color="black"
                                        size={22}
                                    />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 8,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    top: 8,
                                },
                            ]}>
                            Sissy
                        </Text>
                    </View>
                </View>

                <View
                    style={{
                        height: SCREEN_HEIGHT * 1.3,
                        width: ITEM_WIDTH * 2.2,
                        backgroundColor: 'rgba(255,255,255,0)',
                        position: 'absolute',
                        alignItems: 'center',
                        justifyContent: 'center',
                        zIndex: 3000,
                        transform: [{ rotate: '45deg' }],
                    }}>
                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            top: 0,
                            zIndex: 300,
                            transform: [{ rotate: '-45deg' }],
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    You should get in touch with her because
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon
                                        style={{ left: 1 }}
                                        name="add"
                                        color="black"
                                        size={22}
                                    />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 8,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    top: 8,
                                },
                            ]}>
                            Sissy
                        </Text>
                    </View>

                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            zIndex: 300,
                            bottom: 0,
                            transform: [{ rotate: '-45deg' }],
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    You should get in touch with her because
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon
                                        style={{ left: 1 }}
                                        name="add"
                                        color="black"
                                        size={22}
                                    />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 8,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    top: 8,
                                },
                            ]}>
                            Sissy
                        </Text>
                    </View>
                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            zIndex: 300,
                            left: -130,
                            transform: [{ rotate: '-45deg' }],
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    You should get in touch with her because
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon
                                        style={{ left: 1 }}
                                        name="add"
                                        color="black"
                                        size={22}
                                    />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 8,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    top: 8,
                                },
                            ]}>
                            Sissy
                        </Text>
                    </View>
                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            zIndex: 300,
                            right: -130,
                            transform: [{ rotate: '-45deg' }],
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    You should get in touch with her because
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon
                                        style={{ left: 1 }}
                                        name="add"
                                        color="black"
                                        size={22}
                                    />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 8,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    top: 8,
                                },
                            ]}>
                            Anna
                        </Text>
                    </View>
                </View>

                <View
                    style={{
                        position: 'absolute',
                        height: SCREEN_HEIGHT * 0.7,
                        width: ITEM_WIDTH,
                        backgroundColor: 'rgba(255,255,255,0)',
                        justifyContent: 'center',
                        alignItems: 'center',
                        zIndex: 1000,
                    }}>
                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            top: 0,
                            zIndex: 300,
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    You should get in touch with her because
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon
                                        style={{ left: 1 }}
                                        name="add"
                                        color="black"
                                        size={22}
                                    />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 8,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    top: 8,
                                },
                            ]}>
                            Alicja
                        </Text>
                    </View>

                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            zIndex: 300,
                            bottom: 0,
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    Having your life is your control
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon name="add" color="black" size={22} />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 8,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    top: 8,
                                },
                            ]}>
                            vane_99
                        </Text>
                    </View>
                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            zIndex: 300,
                            left: -130,
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    Spontaneus loving and relief
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon name="add" color="black" size={22} />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 8,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    top: 8,
                                },
                            ]}>
                            Sissy
                        </Text>
                    </View>
                    <View
                        style={{
                            backgroundColor: 'rgba(255,255,255,0)',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingBottom: 10,
                            position: 'absolute',
                            zIndex: 300,
                            right: -130,
                        }}>
                        <View
                            style={{
                                backgroundColor: '#202020',
                                height: 85,
                                width: 210,
                                borderRadius: 300,
                                flexDirection: 'row',
                            }}>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 3,
                                    justifyContent: 'center',
                                    paddingLeft: 20,
                                }}>
                                <Text
                                    numberOfLines={3}
                                    style={[
                                        styles.pBodyFont,
                                        { color: 'white', fontSize: 13, position: 'relative' },
                                    ]}>
                                    Having a friend that love to you
                                </Text>
                            </View>
                            <View
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    flex: 1.5,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}>
                                <TouchableOpacity
                                    style={{
                                        width: 35,
                                        height: 35,
                                        backgroundColor: '#f6d4d2',
                                        borderRadius: 100,
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                    }}>
                                    <TabBarIcon name="add" color="black" size={22} />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <Image
                            style={{
                                width: 65,
                                height: 65,
                                borderRadius: 100,
                                borderWidth: 1,
                                bottom: 8,
                                borderColor: 'white',
                            }}
                            source={{ uri: 'http://placekitten.com/200/300' }}
                        />
                        <Text
                            style={[
                                styles.pFont,
                                {
                                    color: 'white',
                                    fontSize: 12,
                                    position: 'relative',
                                    top: 8,
                                },
                            ]}>
                            Alexander
                        </Text>
                    </View>
                </View>
            </ReactNativeZoomableView>
        </View>
        <Button
            title={`${showMarkers ? 'Hide' : 'Show'} markers`}
            onPress={() => setShowMarkers((value) => !value)}
        />
    </View>
);

}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
contents: {
flex: 1,
alignSelf: 'stretch',
},
box: {
borderWidth: 5,
flexShrink: 1,
height: SCREEN_HEIGHT,
width: ITEM_WIDTH,
backgroundColor: 'black',
},
img: {
width: '100%',
height: '100%',
resizeMode: 'contain',
},
marker: {
position: 'absolute',
top: '50%',
left: '50%',
width: 20,
height: 20,
marginLeft: -10,
marginTop: -10,
borderRadius: 10,
backgroundColor: 'white',
borderWidth: 2,
},
});

@mrmarino023
Copy link
Author

If i put this code as root component it works, but if it's in the navigation root , doesn't work well

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@mrmarino023