Karthik Karthik-B-06

🐙

trying to create and solve problems with code

I try to solve problems with code.

Karthik-B-06 / ImageContainer.js

Last active June 9, 2020 14:21

Image Container for Overlapping Container

	import React from 'react';
	import { Animated, StyleSheet } from 'react-native';

	const ImageContainer = ({
	scrollY,
	imageSource,
	imageHeight,
	}) => {
	return (
	<Animated.Image

Karthik-B-06 / LoadingAtom.js

Created June 4, 2020 17:26

	import React from 'react';
	import { Rect } from 'react-native-svg';
	import ContentLoader from 'rn-content-loader';
	import { deviceWidth } from '../helpers/constants';

	export const LoadingAtom = (props) => {
	return (
	<ContentLoader
	height={120}
	width={(deviceWidth - 80) / 2}

Karthik-B-06 / index.js

Last active June 4, 2020 17:45

Overlapping Container Wrapper

	import React, { useState } from 'react';
	import { Animated, SafeAreaView, StatusBar, StyleSheet, View } from 'react-native';
	import { deviceHeight } from '../helpers/constants';
	import BottomContainer from './BottomContainer';
	import ImageContainer from './ImageContainer';
	import { LoadingAtom } from './LoadingAtom';

	const OverlappingContainers = (props) => {
	const [scrollY, setScrollY] = useState(new Animated.Value(0));
	const imageSource = 'https://images.unsplash.com/photo-1591187194794-1860cc81437c';

Karthik-B-06 / AdvancedSearchComponent.js

Last active June 12, 2020 17:23

Advanced Search Component

	import React, { useMemo, useState } from 'react';
	import { Animated, ScrollView, StatusBar, StyleSheet, TextInput, View, Text, TouchableHighlight } from 'react-native';
	import mockList from './helpers/mockList';
	import { deviceWidth } from './LoaderComponent';
	import { TouchableOpacity } from 'react-native-gesture-handler';

	const SearchComponent = (props) => {
	const {
	clampedScroll
	} = props;

Karthik-B-06 / NewApp.js

Created June 12, 2020 17:30

	import React, { useState, useMemo } from 'react';
	import { Animated, SafeAreaView, StatusBar, View } from 'react-native';
	import NameListItem from './src/NameListItem';
	import SearchComponent from './src/SearchComponent';
	import { deviceHeight } from './src/LoaderComponent';
	import mockList from './src/helpers/mockList';
	import 'react-native-gesture-handler';

	console.disableYellowBox = true;

Karthik-B-06 / useGetAllSkills.js

Created June 15, 2020 18:52

A Simple React Query Hook with GraphQL

	import axios from "axios";
	import { useQuery } from "react-query";

	import { BACKEND_GQL_ENDPOINT, X_HASURA_ADMIN_SECRET } from "./api";

	export const post = ({ data, token }) => ({
	method: 'POST',
	url: BACKEND_GQL_ENDPOINT,
	data,
	headers: {

Karthik-B-06 / ActionSheet.js

Last active June 27, 2020 08:47

React Native Custom Action Sheet

	import PropTypes from 'prop-types';
	import React from 'react';
	import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';

	const PRIMARY_COLOR = 'rgb(0,98,255)';
	const WHITE = '#ffffff';
	const BORDER_COLOR = '#DBDBDB';

	const ActionSheet = (props) => {
	const { actionItems } = props;

Karthik-B-06 / ActionSheetRoot.js

Created June 27, 2020 08:30

A component which renders the Action Sheet

	import React, { useState } from 'react';
	import {
	Dimensions, SafeAreaView,
	StatusBar, StyleSheet,
	Text,
	TouchableOpacity, View
	} from 'react-native';
	import Modal from 'react-native-modal';
	import ActionSheet from './src/actionSheet';

Karthik-B-06 / button.html

Created July 2, 2020 10:45

A HTML example of Button from W3Schools

	<!DOCTYPE html>
	<html>
	<body>

	<button onclick="myFunction()">Click me</button>

	<p id="demo"></p>

	<p>A function is triggered when the button is clicked. The function outputs some text in a p element with id="demo".</p>

Karthik-B-06 / button.js

Created July 2, 2020 10:49

A React Component Button