Javascript example

[dan-fein]

I'm not using Typescript and can't figure out how to convert this to a Javascript example. It doesn't make sense for me to start using Typescript in the middle of this project. Does anybody have a javascript example?

Thank you!

[sanbat]

Exactly.

I just managed with converting ts through https://www.typescriptlang.org/play

[dan-fein]

@sanbat I tried that actually! I wasn't able to make sense of how a few things translated.

Like (and this is just one of many): const { useTabsContext, ...Tabs } = createCollapsibleTabs<TabNames>() turns into: const _a = createCollapsibleTabs(), { useTabsContext } = _a, Tabs = __rest(_a, ["useTabsContext"]);

So is this saying TabNames is sent in as a parameter, because it totally disappears during the conversion, it's not clear where it goes/how it plays into this.

I think in general packages should be in shown examples in Javascript as users of Typescript more often know Javascript than vice versa.

[sanbat]

@danielfein You are right, need in JS also.

Meanwhile I suggest you to use converted js. If you check your project 'node_module' folder of react-native-collapsible-tab-view, there you can see this module using converted js.

Working Example of converted JS

import React from 'react';
import { createCollapsibleTabs, } from 'react-native-collapsible-tab-view';
import { useAnimatedRef } from 'react-native-reanimated';
import {Text, View, StyleSheet} from "react-native";

const HEADER_HEIGHT = 250;
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};

const _a = createCollapsibleTabs(), { useTabsContext } = _a, Tabs = __rest(_a, ["useTabsContext"]);

const Example = (props) => {
    const containerRef = useAnimatedRef();
    const screenARef = useAnimatedRef();
    const screenBRef = useAnimatedRef();
    const screenCRef = useAnimatedRef();
    const screenDRef = useAnimatedRef();
    const screenERef = useAnimatedRef();
    const screenFRef = useAnimatedRef();
    const screenGRef = useAnimatedRef();
    const screenHRef = useAnimatedRef();
    const screenIRef = useAnimatedRef();
    const [refMap] = React.useState({
        screenA: screenARef,
        screenB: screenBRef,
        screenC: screenCRef,
        screenD: screenDRef,
        screenE: screenERef,
        screenF: screenFRef,
        screenG: screenGRef,
        screenH: screenHRef,
        screenI: screenIRef,
    });
    return (<Tabs.Container
        HeaderComponent={Header}
        containerRef={containerRef}
        headerHeight={HEADER_HEIGHT}
        refMap={refMap} lazy tabBarProps={{
        scrollEnabled: true,
    }} {...props}>
        {Object.keys(refMap).map((name) => {
            return (<Tabs.ScrollView key={name} name={name}>
                <ArticleContent />
            </Tabs.ScrollView>);
        })}
    </Tabs.Container>);
};

const Header = () => {
    return (<View style={styles.root}>
        <Text style={styles.text}>TS converted</Text>
    </View>);
};

    const ArticleContent = () => {
        return (<>
            <View style={styles.author}>
                <View style={styles.meta}>
                    <Text style={styles.name}>Knowledge Bot</Text>
                    <Text style={styles.timestamp}>1st Jan 2025</Text>
                </View>
            </View>
            <Text style={styles.title}>Lorem Ipsum</Text>
            <Text style={styles.paragraph}>
                Contrary to popular belief, Lorem Ipsum is not simply random text. It
                has roots in a piece of classical Latin literature from 45 BC, making it
                over 2000 years old.
            </Text>
            <Text style={styles.paragraph}>
                Richard McClintock, a Latin professor at Hampden-Sydney College in
                Virginia, looked up one of the more obscure Latin words, consectetur,
                from a Lorem Ipsum passage, and going through the cites of the word in
                classical literature, discovered the undoubtable source.
            </Text>
            <Text style={styles.paragraph}>
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
                Finibus Bonorum et Malorum&quot; (The Extremes of Good and Evil) by
                Cicero, written in 45 BC. This book is a treatise on the theory of
                ethics, very popular during the Renaissance. The first line of Lorem
                Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
                section 1.10.32.
            </Text>
        </>);
    };

export default Example;

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
    },
    root: {
        height: HEADER_HEIGHT,
        backgroundColor: '#2196f3',
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        color: 'white',
        fontSize: 24,
    },
    content: {
        paddingVertical: 16,
    },
    author: {
        flexDirection: 'row',
        marginVertical: 8,
        marginHorizontal: 16,
    },
    meta: {
        marginHorizontal: 8,
        justifyContent: 'center',
    },
    name: {
        color: '#000',
        fontWeight: 'bold',
        fontSize: 16,
        lineHeight: 24,
    },
    timestamp: {
        color: '#999',
        fontSize: 14,
        lineHeight: 21,
    },
    avatar: {
        height: 48,
        width: 48,
        borderRadius: 24,
    },
    title: {
        color: '#000',
        fontWeight: 'bold',
        fontSize: 36,
        marginVertical: 8,
        marginHorizontal: 16,
    },
    paragraph: {
        color: '#000',
        fontSize: 16,
        lineHeight: 24,
        marginVertical: 8,
        marginHorizontal: 16,
    },
    image: {
        width: '100%',
        height: 200,
        resizeMode: 'cover',
        marginVertical: 8,
    },
});

May be this will help you until they produce JS.

Anyhow this is an awesome package

[PedroBern]

You can see #23 as an example of how to translate ts to js, the example is using the v1 docs but is pretty straight forward.

I'm closing it for now, if somebody still needs help, just comment below :)